diff --git a/src/components/NewDatePicker/datePickerPropTypes.js b/src/components/NewDatePicker/datePickerPropTypes.js index 0c3906e3c6ff..514a77a6c2da 100644 --- a/src/components/NewDatePicker/datePickerPropTypes.js +++ b/src/components/NewDatePicker/datePickerPropTypes.js @@ -29,9 +29,6 @@ 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 = { @@ -39,7 +36,6 @@ const defaultProps = { 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 index fe5bc28fc4f5..f05972b18a30 100644 --- 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 ( - this.wrapperRef = ref} - onBlur={(event) => { - if (this.wrapperRef && event.relatedTarget && this.wrapperRef.contains(event.relatedTarget)) { - return; - } - this.hidePicker(); - }} - style={styles.datePickerRoot} - > + 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 && ( { - // To prevent focus stealing - e.preventDefault(); - }} style={[styles.datePickerPopover, styles.border, {opacity: this.opacity}]} > 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} />