Merge pull request woocommerce/woocommerce-admin#1994 from woocommerce/fix/search-filter-focus

Fix/search filter focus

plugins/woocommerce-admin/packages/components/CHANGELOG.md

@@ -1,8 +1,9 @@
-# (unreleased)
+# 2.0.0 (unreleased)
 - Chart legend component now uses withInstanceId HOC so the ids used in several HTML elements are unique.
 - Chart component now accepts data with negative values.
 - Chart component: new prop `filterParam` used to detect selected items in the current query. If there are, they will be displayed in the chart even if their values are 0.
 - Expand search results and allow searching when input is refocused in autocompleter.
+- Animation Slider: Remove `focusOnChange` in favor of `onExited` so consumers can pass a function to be exectuted after a transition has finished.
 
 # 1.6.0
 - Chart component: new props `emptyMessage` and `baseValue`. When an empty message is provided, it will be displayed on top of the chart if there are no values different than `baseValue`.

plugins/woocommerce-admin/packages/components/src/animation-slider/index.js

@@ -22,17 +22,9 @@ class AnimationSlider extends Component {
 	}
 
 	onExited() {
-		const { onExited, focusOnChange } = this.props;
+		const { onExited } = this.props;
 		if ( onExited ) {
-			onExited();
-		}
-		if ( focusOnChange ) {
-			const focusable = this.container.current.querySelector(
-				'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-			);
-			if ( focusable ) {
-				focusable.focus();
-			}
+			onExited( this.container.current );
 		}
 	}
 
@@ -74,9 +66,9 @@ AnimationSlider.propTypes = {
 	 */
 	animate: PropTypes.oneOf( [ null, 'left', 'right' ] ),
 	/**
-	 * When set to true, the first focusable element will be focused after an animation has finished.
+	 * A function to be executed after a transition is complete, passing the containing ref as the argument.
 	 */
-	focusOnChange: PropTypes.bool,
+	onExited: PropTypes.func,
 };
 
 export default AnimationSlider;

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

@@ -4,6 +4,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Button, Dropdown, IconButton } from '@wordpress/components';
+import { focus } from '@wordpress/dom';
 import classnames from 'classnames';
 import { Component } from '@wordpress/element';
 import { find, partial, last, get, includes } from 'lodash';
@@ -42,6 +43,7 @@ class FilterPicker extends Component {
 		this.getVisibleFilters = this.getVisibleFilters.bind( this );
 		this.updateSelectedTag = this.updateSelectedTag.bind( this );
 		this.onTagChange = this.onTagChange.bind( this );
+		this.onContentMount = this.onContentMount.bind( this );
 		this.goBack = this.goBack.bind( this );
 
 		if ( selectedFilter.settings && selectedFilter.settings.getLabels ) {
@@ -168,6 +170,16 @@ class FilterPicker extends Component {
 		);
 	}
 
+	onContentMount( content ) {
+		const { nav } = this.state;
+		const parentFilter = nav.length ? this.getFilter( nav[ nav.length - 1 ] ) : false;
+		const focusableIndex = parentFilter ? 1 : 0;
+		const focusable = focus.tabbable.find( content )[ focusableIndex ];
+		setTimeout( () => {
+			focusable.focus();
+		}, 0 );
+	}
+
 	render() {
 		const { config } = this.props;
 		const { nav, animate } = this.state;
@@ -190,7 +202,7 @@ class FilterPicker extends Component {
 						/>
 					) }
 					renderContent={ ( { onClose } ) => (
-						<AnimationSlider animationKey={ nav } animate={ animate } focusOnChange>
+						<AnimationSlider animationKey={ nav } animate={ animate } onExited={ this.onContentMount }>
 							{ () => (
 								<ul className="woocommerce-filters-filter__content-list">
 									{ parentFilter && (