From 928e600393ca97470785bf097ace8d1d80cda706 Mon Sep 17 00:00:00 2001 From: Hayata Suenaga Date: Tue, 4 Apr 2023 15:11:36 -0700 Subject: [PATCH 1/4] don't hide picker on esc key press or tap outside --- src/components/NewDatePicker/index.js | 23 ++++------------------- 1 file changed, 4 insertions(+), 19 deletions(-) diff --git a/src/components/NewDatePicker/index.js b/src/components/NewDatePicker/index.js index fe5bc28fc4f5..c3afe82fa34d 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 = { @@ -45,19 +44,11 @@ class NewDatePicker extends React.Component { } componentDidMount() { - if (this.props.autoFocus) { - this.showPicker(); - this.textInputRef.focus(); + if (!this.props.autoFocus) { + return; } - - 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); + this.showPicker(); + this.textInputRef.focus(); } componentWillUnmount() { @@ -121,12 +112,6 @@ class NewDatePicker extends React.Component { return ( this.wrapperRef = ref} - onBlur={(event) => { - if (this.wrapperRef && event.relatedTarget && this.wrapperRef.contains(event.relatedTarget)) { - return; - } - this.hidePicker(); - }} style={styles.datePickerRoot} > From 2351b322b9d17b8af6da9cc383da67283ce3c782 Mon Sep 17 00:00:00 2001 From: Hayata Suenaga Date: Wed, 5 Apr 2023 08:37:49 -0700 Subject: [PATCH 2/4] remove unused ref assignment --- src/components/NewDatePicker/index.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/NewDatePicker/index.js b/src/components/NewDatePicker/index.js index c3afe82fa34d..90faff801aca 100644 --- a/src/components/NewDatePicker/index.js +++ b/src/components/NewDatePicker/index.js @@ -110,10 +110,7 @@ class NewDatePicker extends React.Component { render() { return ( - this.wrapperRef = ref} - style={styles.datePickerRoot} - > + Date: Wed, 5 Apr 2023 11:01:09 -0700 Subject: [PATCH 3/4] don't hide calendar at all --- src/components/NewDatePicker/index.js | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/src/components/NewDatePicker/index.js b/src/components/NewDatePicker/index.js index 90faff801aca..e117eaf9f2c9 100644 --- a/src/components/NewDatePicker/index.js +++ b/src/components/NewDatePicker/index.js @@ -30,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); @@ -74,7 +73,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(); }); } @@ -92,22 +90,6 @@ 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 ( From a6f0df184ddd605388e72c04a3dcb2318703be88 Mon Sep 17 00:00:00 2001 From: Hayata Suenaga Date: Thu, 6 Apr 2023 09:16:02 -0700 Subject: [PATCH 4/4] remove unnecessary or redundant code --- .../NewDatePicker/datePickerPropTypes.js | 4 ---- src/components/NewDatePicker/index.js | 14 -------------- .../Profile/PersonalDetails/DateOfBirthPage.js | 13 ------------- 3 files changed, 31 deletions(-) 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 e117eaf9f2c9..f05972b18a30 100644 --- a/src/components/NewDatePicker/index.js +++ b/src/components/NewDatePicker/index.js @@ -47,14 +47,6 @@ class NewDatePicker extends React.Component { return; } this.showPicker(); - this.textInputRef.focus(); - } - - componentWillUnmount() { - if (!this.unsubscribeEscapeKey) { - return; - } - this.unsubscribeEscapeKey(); } /** @@ -73,7 +65,6 @@ class NewDatePicker extends React.Component { setDate(selectedDate) { this.setState({selectedDate}, () => { this.props.onInputChange(moment(selectedDate).format(CONST.DATE.MOMENT_FORMAT_STRING)); - this.textInputRef.blur(); }); } @@ -96,7 +87,6 @@ class NewDatePicker extends React.Component { this.textInputRef = el} icon={Expensicons.Calendar} onPress={this.showPicker} label={this.props.label} @@ -113,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} />