Datepicker maintain focus prop

components/component-docs.json

@@ -5890,12 +5890,24 @@
                 "returns": null
             },
             {
-                "name": "openDialog",
+                "name": "openDialogFromIcon",
                 "docblock": null,
                 "modifiers": [],
                 "params": [],
                 "returns": null
             },
+            {
+                "name": "openDialog",
+                "docblock": null,
+                "modifiers": [],
+                "params": [
+                    {
+                        "name": "isRequestFromIcon",
+                        "type": null
+                    }
+                ],
+                "returns": null
+            },
             {
                 "name": "parseDate",
                 "docblock": null,

components/date-picker/date-picker.jsx

@@ -262,6 +262,7 @@ class Datepicker extends React.Component {
 
 		this.state = {
 			isOpen: false,
+			isOpenFromIcon: false,
 			value: props.value,
 			formattedValue: initDate || '',
 			inputValue: initDate || '',
@@ -309,6 +310,7 @@ class Datepicker extends React.Component {
 					this.props.assistiveTextPreviousMonth || assistiveText.previousMonth // eslint-disable-line react/prop-types
 				}
 				assistiveTextYear={assistiveText.year}
+				canFocusCalendar={this.state.isOpenFromIcon}
 				id={this.getId()}
 				isIsoWeekday={this.props.isIsoWeekday}
 				monthLabels={
@@ -401,7 +403,9 @@ class Datepicker extends React.Component {
 					aria-expanded={this.getIsOpen()}
 					category="utility"
 					name="event"
-					onClick={this.openDialog}
+					onClick={() => {
+						this.openDialogFromIcon();
+					}}
 					type="button"
 				/>
 			),
@@ -524,6 +528,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 +546,7 @@ class Datepicker extends React.Component {
 			this.props.onOpen(event, { portal });
 		}
 
-		if (this.selectedDateCell) {
+		if (this.selectedDateCell && this.state.isOpenFromIcon) {
 			this.selectedDateCell.focus();
 		}
 	};
@@ -548,15 +557,23 @@ class Datepicker extends React.Component {
 		}
 
 		if (this.getIsOpen()) {
-			this.setState({ isOpen: false });
+			this.setState({ isOpen: false, isOpenFromIcon: false });
 
 			if (this.inputRef) {
 				this.inputRef.focus();
 			}
 		}
 	};
 
-	openDialog = () => {
+	openDialogFromIcon = () => {
+		this.setState({ isOpenFromIcon: true });
+		this.openDialog(true);
+	};
+
+	openDialog = (isRequestFromIcon = false) => {
+		if (!isRequestFromIcon) {
+			this.setState({ isOpenFromIcon: false });
+		}
 		if (this.props.onRequestOpen) {
 			this.props.onRequestOpen();
 		} else {

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`
+		 */
+		canFocusCalendar: PropTypes.bool.isRequired,
 		/**
 		 * CSS classes to be added to tag with `slds-datepicker`.
 		 */
@@ -108,26 +112,21 @@ class DatepickerCalendarWrapper extends React.Component {
 
 	state = {
 		initialDateForCalendarRender: this.props.selectedDate,
-		isCalendarFocused: true,
 	};
 
 	handleCalendarBlur = (event, { direction }) => {
 		if (direction === 'next' && this.previousMonthRef) {
-			this.setState({ isCalendarFocused: false });
 			if (this.props.onCalendarFocus) {
 				this.props.onCalendarFocus(event, {
 					direction,
-					isCalendarFocused: false,
 					ref: this.previousMonthRef,
 				});
 			}
 			this.previousMonthRef.focus();
 		} else if (direction === 'previous' && this.todayRef) {
-			this.setState({ isCalendarFocused: false });
 			if (this.props.onCalendarFocus) {
 				this.props.onCalendarFocus(event, {
 					direction,
-					isCalendarFocused: false,
 					ref: this.todayRef,
 				});
 			}
@@ -138,7 +137,6 @@ class DatepickerCalendarWrapper extends React.Component {
 	handleFirstFocusableNodeKeyDown = (event) => {
 		if (event.shiftKey && event.keyCode === KEYS.TAB) {
 			EventUtil.trapEvent(event);
-			this.setState({ isCalendarFocused: true });
 		}
 	};
 
@@ -159,7 +157,6 @@ class DatepickerCalendarWrapper extends React.Component {
 	handleLastFocusableNodeKeyDown = (event) => {
 		if (!event.shiftKey && event.keyCode === KEYS.TAB) {
 			EventUtil.trapEvent(event);
-			this.setState({ isCalendarFocused: true });
 		}
 	};
 
@@ -171,7 +168,7 @@ class DatepickerCalendarWrapper extends React.Component {
 
 	handleRequestFocusDate = (event, data) => {
 		// will be called three times, due to re-render
-		if (data.ref && this.state.isCalendarFocused) {
+		if (data.ref && this.props.canFocusCalendar) {
 			data.ref.focus();
 		}