Fix keyboard navigation of DayPicker elements.

Add prop for specifying an element that's allowed to take focus from DateRange.

packages/components/src/calendar/date-range.js

@@ -58,6 +58,8 @@ class DateRange extends Component {
 			return;
 		}
 
+		const { losesFocusTo } = this.props;
+
 		// Blur triggered internal to the DayPicker component.
 		if (
 			CONTAINER_DIV === blurSource &&
@@ -75,6 +77,27 @@ class DateRange extends Component {
 				)
 			)
 		) {
+			// Allow other DayPicker elements to take focus.
+			if (
+				e.relatedTarget &&
+				(
+					e.relatedTarget.classList.contains( 'DayPickerNavigation_button' ) ||
+					e.relatedTarget.classList.contains( 'CalendarDay' )
+				)
+			) {
+				return;
+			}
+
+			// Allow elements inside a specified ref to take focus.
+			if (
+				e.relatedTarget &&
+				losesFocusTo &&
+				losesFocusTo.contains( e.relatedTarget )
+			) {
+				return;
+			}
+
+			console.log( 'looks like a mouseUp() blur', e );
 			// DayPickerNavigation or CalendarDay mouseUp() is blurring,
 			// so switch focus to the DayPicker's focus region.
 			const focusRegion = this.nodeRef.current.querySelector( '.DayPicker_focusRegion' );
@@ -274,6 +297,11 @@ DateRange.propTypes = {
 	 * The date format in moment.js-style tokens.
 	 */
 	shortDateFormat: PropTypes.string.isRequired,
+	/**
+	 * A ref that the DateRange can lose focus to.
+	 * See: https://github.com/woocommerce/woocommerce-admin/pull/2929.
+	 */
+	losesFocusTo: PropTypes.instanceOf( Element ),
 };
 
 export default withViewportMatch( {

packages/components/src/date-range-filter-picker/content.js

@@ -3,7 +3,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component, Fragment } from '@wordpress/element';
+import { Component, createRef, Fragment } from '@wordpress/element';
 import { TabPanel, Button } from '@wordpress/components';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
@@ -21,6 +21,7 @@ class DatePickerContent extends Component {
 	constructor() {
 		super();
 		this.onTabSelect = this.onTabSelect.bind( this );
+		this.controlsRef = createRef();
 	}
 	onTabSelect( tab ) {
 		const { onUpdate, period } = this.props;
@@ -101,12 +102,14 @@ class DatePickerContent extends Component {
 										afterError={ afterError }
 										beforeError={ beforeError }
 										shortDateFormat={ shortDateFormat }
+										losesFocusTo={ this.controlsRef.current }
 									/>
 								) }
 								<div
 									className={ classnames( 'woocommerce-filters-date__content-controls', {
 										'is-custom': selected.name === 'custom',
 									} ) }
+									ref={ this.controlsRef }
 								>
 									<H className="woocommerce-filters-date__text">
 										{ __( 'compare to', 'woocommerce-admin' ) }