Merge pull request woocommerce/woocommerce-admin#898 from woocommerce/fix/gutenberg-popover-refresh

Update uses of Gutenberg popover for content sizing

plugins/woocommerce-admin/packages/components/src/filters/date/content.js

@@ -24,7 +24,7 @@ class DatePickerContent extends Component {
 		this.onTabSelect = this.onTabSelect.bind( this );
 	}
 	onTabSelect( tab ) {
-		const { onUpdate, period, refreshDropdown } = this.props;
+		const { onUpdate, period } = this.props;
 
 		/**
 		 * If the period is `custom` and the user switches tabs to view the presets,
@@ -34,8 +34,6 @@ class DatePickerContent extends Component {
 		if ( 'period' === tab && 'custom' === period ) {
 			onUpdate( { period: 'today' } );
 		}
-
-		refreshDropdown();
 	}
 
 	render() {

plugins/woocommerce-admin/packages/components/src/filters/date/index.js

@@ -35,14 +35,6 @@ class DatePicker extends Component {
 		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() {
@@ -156,7 +148,6 @@ class DatePicker extends Component {
 							afterError={ afterError }
 							beforeError={ beforeError }
 							shortDateFormat={ shortDateFormat }
-							refreshDropdown={ this.refreshDropdown }
 						/>
 					) }
 				/>

plugins/woocommerce-admin/packages/components/src/filters/filter/index.js

@@ -143,6 +143,7 @@ class FilterPicker extends Component {
 					selected={ selectedTag ? [ selectedTag ] : [] }
 					onChange={ partial( this.onTagChange, filter, onClose ) }
 					inlineTags
+					staticResults
 				/>
 			);
 		}

plugins/woocommerce-admin/packages/components/src/search/autocomplete.js

@@ -260,7 +260,7 @@ export class Autocomplete extends Component {
 	}
 
 	render() {
-		const { children, instanceId, completer: { className = '' } } = this.props;
+		const { children, instanceId, completer: { className = '' }, staticResults } = this.props;
 		const { selectedIndex, filteredOptions, query } = this.state;
 		const { key: selectedKey = '' } = filteredOptions[ selectedIndex ] || {};
 		const isExpanded = filteredOptions.length > 0 && !! query;
@@ -268,11 +268,14 @@ export class Autocomplete extends Component {
 		const activeId = isExpanded
 			? `woocommerce-search__autocomplete-${ instanceId }-${ selectedKey }`
 			: null;
+		const resultsClasses = classnames( 'woocommerce-search__autocomplete-results', {
+			'is-static-results': staticResults,
+		} );
 		return (
 			<div ref={ this.bindNode } className="woocommerce-search__autocomplete">
 				{ children( { isExpanded, listBoxId, activeId, onChange: this.search } ) }
 				{ isExpanded && (
-					<div id={ listBoxId } role="listbox" className="woocommerce-search__autocomplete-results">
+					<div id={ listBoxId } role="listbox" className={ resultsClasses }>
 						{ isExpanded &&
 							map( filteredOptions, ( option, index ) => (
 								<Button

plugins/woocommerce-admin/packages/components/src/search/index.js

@@ -116,7 +116,7 @@ class Search extends Component {
 
 	render() {
 		const autocompleter = this.getAutocompleter();
-		const { placeholder, inlineTags, selected, instanceId, className } = this.props;
+		const { placeholder, inlineTags, selected, instanceId, className, staticResults } = this.props;
 		const { value = '', isActive } = this.state;
 		const aria = {
 			'aria-labelledby': this.props[ 'aria-labelledby' ],
@@ -125,7 +125,11 @@ class Search extends Component {
 		return (
 			<div className={ classnames( 'woocommerce-search', className ) }>
 				<Gridicon className="woocommerce-search__icon" icon="search" size={ 18 } />
-				<Autocomplete completer={ autocompleter } onSelect={ this.selectResult }>
+				<Autocomplete
+					completer={ autocompleter }
+					onSelect={ this.selectResult }
+					staticResults={ staticResults }
+				>
 					{ ( { listBoxId, activeId, onChange } ) =>
 						// Disable reason: The div below visually simulates an input field. Its
 						// child input is the actual input and responds accordingly to all keyboard
@@ -223,15 +227,20 @@ Search.propTypes = {
 		} )
 	),
 	/**
-	 * Render tags inside input, otherwise render below input
+	 * Render tags inside input, otherwise render below input.
 	 */
 	inlineTags: PropTypes.bool,
+	/**
+	 * Render results list positioned statically instead of absolutely.
+	 */
+	staticResults: PropTypes.bool,
 };
 
 Search.defaultProps = {
 	onChange: noop,
 	selected: [],
 	inlineTags: false,
+	staticResults: false,
 };
 
 export default withInstanceId( Search );

plugins/woocommerce-admin/packages/components/src/search/style.scss

@@ -54,6 +54,10 @@
 		&:empty {
 			display: none;
 		}
+
+		&.is-static-results {
+			position: static;
+		}
 	}
 
 	// This a single `button` in the autocomplete popover