Merge pull request woocommerce/woocommerce-admin#294 from woocommerce/fix/dropdown-resize

Datepicker: resize dropdown on tab switch

plugins/woocommerce-admin/client/components/filters/date/content.js

@@ -24,7 +24,7 @@ class DatePickerContent extends Component {
 		this.onTabSelect = this.onTabSelect.bind( this );
 	}
 	onTabSelect( tab ) {
-		const { onUpdate, period } = this.props;
+		const { onUpdate, period, refreshDropdown } = this.props;
 
 		/**
 		 * If the period is `custom` and the user switches tabs to view the presets,
@@ -34,6 +34,8 @@ class DatePickerContent extends Component {
 		if ( 'period' === tab && 'custom' === period ) {
 			onUpdate( { period: 'today' } );
 		}
+
+		refreshDropdown();
 	}
 
 	render() {
@@ -78,11 +80,7 @@ class DatePickerContent extends Component {
 						] }
 						className="woocommerce-filters-date__tabs"
 						activeClass="is-active"
-						initialTabName={
-							'custom' === period
-								? 'custom'
-								: 'period' /* Open to current tab https://github.com/WordPress/gutenberg/pull/6885 */
-						}
+						initialTabName={ 'custom' === period ? 'custom' : 'period' }
 						onSelect={ this.onTabSelect }
 					>
 						{ selectedTab => (

plugins/woocommerce-admin/client/components/filters/date/index.js

@@ -2,8 +2,8 @@
 /**
  * External dependencies
  */
+import { Component, createRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
 import { Dropdown } from '@wordpress/components';
 import PropTypes from 'prop-types';
 
@@ -26,10 +26,20 @@ class DatePicker extends Component {
 		super( props );
 		this.state = this.getResetState();
 
+		this.dropdownRef = createRef();
+
 		this.update = this.update.bind( this );
 		this.onSelect = this.onSelect.bind( this );
 		this.isValidSelection = this.isValidSelection.bind( this );
 		this.resetCustomValues = this.resetCustomValues.bind( this );
+		this.refreshDropdown = this.refreshDropdown.bind( this );
+	}
+
+	refreshDropdown() {
+		setTimeout( () => {
+			const dropdown = this.dropdownRef.current;
+			dropdown.refresh && dropdown.refresh();
+		} );
 	}
 
 	getResetState() {
@@ -115,6 +125,7 @@ class DatePicker extends Component {
 			<div className="woocommerce-filters-date">
 				<p>{ __( 'Date Range', 'wc-admin' ) }:</p>
 				<Dropdown
+					ref={ this.dropdownRef }
 					contentClassName="woocommerce-filters-date__content"
 					position="bottom"
 					expandOnMobile
@@ -142,6 +153,7 @@ class DatePicker extends Component {
 							afterError={ afterError }
 							beforeError={ beforeError }
 							shortDateFormat={ shortDateFormat }
+							refreshDropdown={ this.refreshDropdown }
 						/>
 					) }
 				/>