Merge pull request #16941 from Expensify/hayata-don'tCloseCalendarOnT…

…apOutside Don't hide picker on esc key press or tap outside
Expensify · Apr 11, 2023 · 7458fe3 · 7458fe3
2 parents b041f49 + a6f0df1
commit 7458fe3
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 70 deletions.
diff --git a/src/components/NewDatePicker/datePickerPropTypes.js b/src/components/NewDatePicker/datePickerPropTypes.js
@@ -29,17 +29,13 @@ const propTypes = {
 
     /** Default year to be set in the calendar picker */
     selectedYear: PropTypes.string,
-
-    /** A function called when picked is closed */
-    onHidePicker: PropTypes.func,
 };
 
 const defaultProps = {
     ...defaultBaseTextInputPropTypes,
     minDate: moment().year(CONST.CALENDAR_PICKER.MIN_YEAR).toDate(),
     maxDate: moment().year(CONST.CALENDAR_PICKER.MAX_YEAR).toDate(),
     value: undefined,
-    onHidePicker: () => {},
 };
 
 export {propTypes, defaultProps};
diff --git a/src/components/NewDatePicker/index.js b/src/components/NewDatePicker/index.js
@@ -7,7 +7,6 @@ import CONST from '../../CONST';
 import styles from '../../styles/styles';
 import * as Expensicons from '../Icon/Expensicons';
 import {propTypes as datePickerPropTypes, defaultProps as defaultDatePickerProps} from './datePickerPropTypes';
-import KeyboardShortcut from '../../libs/KeyboardShortcut';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 
 const propTypes = {
@@ -31,7 +30,6 @@ class NewDatePicker extends React.Component {
 
         this.setDate = this.setDate.bind(this);
         this.showPicker = this.showPicker.bind(this);
-        this.hidePicker = this.hidePicker.bind(this);
         this.setCurrentSelectedMonth = this.setCurrentSelectedMonth.bind(this);
 
         this.opacity = new Animated.Value(0);
@@ -45,26 +43,10 @@ class NewDatePicker extends React.Component {
     }
 
     componentDidMount() {
-        if (this.props.autoFocus) {
-            this.showPicker();
-            this.textInputRef.focus();
-        }
-
-        const shortcutConfig = CONST.KEYBOARD_SHORTCUTS.ESCAPE;
-        this.unsubscribeEscapeKey = KeyboardShortcut.subscribe(shortcutConfig.shortcutKey, () => {
-            if (!this.state.isPickerVisible) {
-                return;
-            }
-            this.hidePicker();
-            this.textInputRef.blur();
-        }, shortcutConfig.descriptionKey, shortcutConfig.modifiers, true, () => !this.state.isPickerVisible);
-    }
-
-    componentWillUnmount() {
-        if (!this.unsubscribeEscapeKey) {
+        if (!this.props.autoFocus) {
             return;
         }
-        this.unsubscribeEscapeKey();
+        this.showPicker();
     }
 
     /**
@@ -83,8 +65,6 @@ class NewDatePicker extends React.Component {
     setDate(selectedDate) {
         this.setState({selectedDate}, () => {
             this.props.onInputChange(moment(selectedDate).format(CONST.DATE.MOMENT_FORMAT_STRING));
-            this.hidePicker();
-            this.textInputRef.blur();
         });
     }
 
@@ -101,38 +81,12 @@ class NewDatePicker extends React.Component {
         });
     }
 
-    /**
-     * Function to animate and hide the picker.
-     */
-    hidePicker() {
-        Animated.timing(this.opacity, {
-            toValue: 0,
-            duration: 100,
-            useNativeDriver: true,
-        }).start((animationResult) => {
-            if (!animationResult.finished) {
-                return;
-            }
-            this.setState({isPickerVisible: false}, this.props.onHidePicker);
-        });
-    }
-
     render() {
         return (
-            <View
-                ref={ref => this.wrapperRef = ref}
-                onBlur={(event) => {
-                    if (this.wrapperRef && event.relatedTarget && this.wrapperRef.contains(event.relatedTarget)) {
-                        return;
-                    }
-                    this.hidePicker();
-                }}
-                style={styles.datePickerRoot}
-            >
+            <View style={styles.datePickerRoot}>
                 <View style={[this.props.isSmallScreenWidth ? styles.flex2 : {}]}>
                     <TextInput
                         forceActiveLabel
-                        ref={el => this.textInputRef = el}
                         icon={Expensicons.Calendar}
                         onPress={this.showPicker}
                         label={this.props.label}
@@ -149,10 +103,6 @@ class NewDatePicker extends React.Component {
                 {
                     this.state.isPickerVisible && (
                     <Animated.View
-                        onMouseDown={(e) => {
-                            // To prevent focus stealing
-                            e.preventDefault();
-                        }}
                         style={[styles.datePickerPopover, styles.border, {opacity: this.opacity}]}
                     >
                         <CalendarPicker

diff --git a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
@@ -39,7 +39,6 @@ class DateOfBirthPage extends Component {
 
         this.validate = this.validate.bind(this);
         this.updateDateOfBirth = this.updateDateOfBirth.bind(this);
-        this.clearSelectedYear = this.clearSelectedYear.bind(this);
         this.getYearFromRouteParams = this.getYearFromRouteParams.bind(this);
         this.minDate = moment().subtract(CONST.DATE_BIRTH.MAX_AGE, 'Y').toDate();
         this.maxDate = moment().subtract(CONST.DATE_BIRTH.MIN_AGE, 'Y').toDate();
@@ -65,9 +64,6 @@ class DateOfBirthPage extends Component {
         const {params} = this.props.route;
         if (params && params.year) {
             this.setState({selectedYear: params.year});
-            if (this.datePicker) {
-                this.datePicker.showPicker();
-            }
         }
     }
 
@@ -82,13 +78,6 @@ class DateOfBirthPage extends Component {
         );
     }
 
-    /**
-     * A function to clear selected year
-     */
-    clearSelectedYear() {
-        this.setState({selectedYear: ''});
-    }
-
     /**
      * @param {Object} values
      * @param {String} values.dob - date of birth
@@ -131,14 +120,12 @@ class DateOfBirthPage extends Component {
                 >
                     <NewDatePicker
                         autoFocus
-                        ref={ref => this.datePicker = ref}
                         inputID="dob"
                         label={this.props.translate('common.date')}
                         defaultValue={privateDetails.dob || ''}
                         minDate={this.minDate}
                         maxDate={this.maxDate}
                         selectedYear={this.state.selectedYear}
-                        onHidePicker={this.clearSelectedYear}
                     />
                 </Form>
             </ScreenWrapper>