Add boolean prop to allow datepicker input to maintain focus when selected/interacted with

Author: Ben Fox

components/component-docs.json

@@ -5960,6 +5960,17 @@
                     "computed": false
                 }
             },
+            "canInputMaintainFocus": {
+                "type": {
+                    "name": "bool"
+                },
+                "required": false,
+                "description": "When `true`, clicking or typing in `Input` will not result in focus shifting away from `Input`",
+                "defaultValue": {
+                    "value": "false",
+                    "computed": false
+                }
+            },
             "className": {
                 "type": {
                     "name": "union",

components/date-picker/__docs__/storybook-stories.jsx

@@ -8,6 +8,7 @@ import Datepicker from '../../date-picker';
 import { DATE_PICKER } from '../../../utilities/constants';
 
 import Default from '../__examples__/default';
+import MaintainInputFocus from '../__examples__/maintain-input-focus'
 import IsoWeekdays from '../__examples__/iso-weekday';
 import CustomInput from '../__examples__/custom-input';
 import SnaphotDefault from '../__examples__/snapshot-default';
@@ -33,6 +34,7 @@ storiesOf(DATE_PICKER, module)
 	.add('Default - Right to Left (RTL)', () =>
 		makeRtl(<Default action={action} />)
 	)
+	.add('Maintain Input Focus', () => <MaintainInputFocus action={action} canInputMaintainFocus />)
 	.add('ISO weekdays', () => <IsoWeekdays action={action} />)
 	.add('Custom Input', () => <CustomInput action={action} />)
 	.add('Inline menu', () => (

components/date-picker/__examples__/maintain-input-focus.jsx

@@ -0,0 +1,40 @@
+/* eslint-disable no-console, react/prop-types */
+import React from 'react';
+
+import IconSettings from '~/components/icon-settings';
+import Datepicker from '~/components/date-picker';
+
+class Example extends React.Component {
+	static displayName = 'DatepickerExample';
+
+	render() {
+		return (
+			<IconSettings iconPath="/assets/icons">
+				<Datepicker
+					canInputMaintainFocus
+					labels={{
+						label: 'Date',
+					}}
+					onChange={(event, data) => {
+						if (this.props.action) {
+							const dataAsArray = Object.keys(data).map((key) => data[key]);
+							this.props.action('onChange')(event, data, ...dataAsArray);
+						} else if (console) {
+							console.log('onChange', event, data);
+						}
+					}}
+					onCalendarFocus={(event, data) => {
+						if (this.props.action) {
+							const dataAsArray = Object.keys(data).map((key) => data[key]);
+							this.props.action('onCalendarFocus')(event, data, ...dataAsArray);
+						} else if (console) {
+							console.log('onCalendarFocus', event, data);
+						}
+					}}
+				/>
+			</IconSettings>
+		);
+	}
+}
+
+export default Example; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime

components/date-picker/date-picker.jsx

@@ -52,6 +52,10 @@ const propTypes = {
 	 * Aligns the right or left side of the menu with the respective side of the trigger. _Tested with snapshot testing._
 	 */
 	align: PropTypes.oneOf(['left', 'right']),
+	/**
+	 * When `true`, clicking or typing in `Input` will not result in focus shifting away from `Input`
+	 */
+	canInputMaintainFocus: PropTypes.bool,
 	/**
 	 * CSS classes to be added to tag with `slds-datepicker`. If you are looking for the outer DOM node (slds-dropdown-trigger), please review `triggerClassName`. _Tested with snapshot testing._
 	 */
@@ -197,6 +201,7 @@ const defaultProps = {
 		previousMonth: 'Previous month',
 		year: 'Year',
 	},
+	canInputMaintainFocus: false,
 	formatter(date) {
 		return date
 			? `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`
@@ -309,6 +314,7 @@ class Datepicker extends React.Component {
 					this.props.assistiveTextPreviousMonth || assistiveText.previousMonth // eslint-disable-line react/prop-types
 				}
 				assistiveTextYear={assistiveText.year}
+				canStealFocus={!this.props.canInputMaintainFocus}
 				id={this.getId()}
 				isIsoWeekday={this.props.isIsoWeekday}
 				monthLabels={
@@ -524,6 +530,11 @@ class Datepicker extends React.Component {
 			this.setState({ isOpen: true });
 		}
 
+		if (event.keyCode === KEYS.ESCAPE || event.keyCode === KEYS.ENTER) {
+			EventUtil.trapEvent(event);
+			this.setState({ isOpen: false });
+		}
+
 		// Please remove `onKeyDown` on the next breaking change.
 		/* eslint-disable react/prop-types */
 		if (this.props.onKeyDown) {
@@ -537,7 +548,7 @@ class Datepicker extends React.Component {
 			this.props.onOpen(event, { portal });
 		}
 
-		if (this.selectedDateCell) {
+		if (this.selectedDateCell && !this.props.canInputMaintainFocus) {
 			this.selectedDateCell.focus();
 		}
 	};

components/date-picker/private/calendar-wrapper.jsx

@@ -40,6 +40,10 @@ class DatepickerCalendarWrapper extends React.Component {
 		 * One letter abbreviations of the days of the week, starting on Sunday.
 		 */,
 		abbreviatedWeekDayLabels: PropTypes.array.isRequired,
+		/**
+		 * Whether or not the `CalendarWrapper` can steal focus from the main `Input`
+		 */
+		canStealFocus: PropTypes.bool.isRequired,
 		/**
 		 * CSS classes to be added to tag with `slds-datepicker`.
 		 */
@@ -108,7 +112,7 @@ class DatepickerCalendarWrapper extends React.Component {
 
 	state = {
 		initialDateForCalendarRender: this.props.selectedDate,
-		isCalendarFocused: true,
+		isCalendarFocused: this.props.canStealFocus,
 	};
 
 	handleCalendarBlur = (event, { direction }) => {