Fix calendar focus when icon clicked. Otherwise default to keep input focus.

Update autogenerated docs

Author: Ben Fox

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,
@@ -5960,17 +5972,6 @@
                     "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,7 +8,6 @@ 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';
@@ -34,7 +33,6 @@ 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

@@ -52,10 +52,6 @@ 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._
 	 */
@@ -201,7 +197,6 @@ const defaultProps = {
 		previousMonth: 'Previous month',
 		year: 'Year',
 	},
-	canInputMaintainFocus: false,
 	formatter(date) {
 		return date
 			? `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`
@@ -267,6 +262,7 @@ class Datepicker extends React.Component {
 
 		this.state = {
 			isOpen: false,
+			isOpenFromIcon: false,
 			value: props.value,
 			formattedValue: initDate || '',
 			inputValue: initDate || '',
@@ -314,7 +310,7 @@ class Datepicker extends React.Component {
 					this.props.assistiveTextPreviousMonth || assistiveText.previousMonth // eslint-disable-line react/prop-types
 				}
 				assistiveTextYear={assistiveText.year}
-				canStealFocus={!this.props.canInputMaintainFocus}
+				canFocusCalendar={this.state.isOpenFromIcon}
 				id={this.getId()}
 				isIsoWeekday={this.props.isIsoWeekday}
 				monthLabels={
@@ -407,7 +403,9 @@ class Datepicker extends React.Component {
 					aria-expanded={this.getIsOpen()}
 					category="utility"
 					name="event"
-					onClick={this.openDialog}
+					onClick={() => {
+						this.openDialogFromIcon();
+					}}
 					type="button"
 				/>
 			),
@@ -548,7 +546,7 @@ class Datepicker extends React.Component {
 			this.props.onOpen(event, { portal });
 		}
 
-		if (this.selectedDateCell && !this.props.canInputMaintainFocus) {
+		if (this.selectedDateCell && this.state.isOpenFromIcon) {
 			this.selectedDateCell.focus();
 		}
 	};
@@ -559,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/date-picker.jsx

@@ -43,7 +43,7 @@ class DatepickerCalendarWrapper extends React.Component {
 		/**
 		 * Whether or not the `CalendarWrapper` can steal focus from the main `Input`
 		 */
-		canStealFocus: PropTypes.bool.isRequired,
+		canFocusCalendar: PropTypes.bool.isRequired,
 		/**
 		 * CSS classes to be added to tag with `slds-datepicker`.
 		 */
@@ -112,26 +112,21 @@ class DatepickerCalendarWrapper extends React.Component {
 
 	state = {
 		initialDateForCalendarRender: this.props.selectedDate,
-		isCalendarFocused: this.props.canStealFocus,
 	};
 
 	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,
 				});
 			}
@@ -142,7 +137,6 @@ class DatepickerCalendarWrapper extends React.Component {
 	handleFirstFocusableNodeKeyDown = (event) => {
 		if (event.shiftKey && event.keyCode === KEYS.TAB) {
 			EventUtil.trapEvent(event);
-			this.setState({ isCalendarFocused: true });
 		}
 	};
 
@@ -163,7 +157,6 @@ class DatepickerCalendarWrapper extends React.Component {
 	handleLastFocusableNodeKeyDown = (event) => {
 		if (!event.shiftKey && event.keyCode === KEYS.TAB) {
 			EventUtil.trapEvent(event);
-			this.setState({ isCalendarFocused: true });
 		}
 	};
 
@@ -175,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();
 		}