From 6eb6e4d5dc6c61e50ba5aad468ac7d57de04a797 Mon Sep 17 00:00:00 2001 From: tienifr Date: Fri, 13 Jan 2023 12:26:44 +0700 Subject: [PATCH 1/6] fix/14084 Bank account : The bottom section of Personal Information blinks when opening and closing DatePicker --- src/components/DatePicker/index.ios.js | 25 ++++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js index d0945e0607aa..ab3205e2a41f 100644 --- a/src/components/DatePicker/index.ios.js +++ b/src/components/DatePicker/index.ios.js @@ -3,7 +3,7 @@ import React from 'react'; import {Button, View, Keyboard} from 'react-native'; import RNDatePicker from '@react-native-community/datetimepicker'; import moment from 'moment'; -import _ from 'underscore'; +import _, { compose } from 'underscore'; import TextInput from '../TextInput'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import Popover from '../Popover'; @@ -11,6 +11,7 @@ import CONST from '../../CONST'; import styles from '../../styles/styles'; import themeColors from '../../styles/themes/default'; import {propTypes, defaultProps} from './datepickerPropTypes'; +import withKeyboardState from '../withKeyboardState'; const datepickerPropTypes = { ...propTypes, @@ -36,9 +37,16 @@ class DatePicker extends React.Component { * @param {Event} event */ showPicker(event) { - Keyboard.dismiss(); + if(this.props.isKeyboardShown){ + const listener = Keyboard.addListener('keyboardDidHide', () => { + this.setState({isPickerVisible: true}); + listener.remove(); + }); + Keyboard.dismiss(); + }else{ + this.setState({isPickerVisible: true}); + } this.initialValue = this.state.selectedDate; - this.setState({isPickerVisible: true}); event.preventDefault(); } @@ -134,7 +142,10 @@ DatePicker.defaultProps = defaultProps; * locale. Otherwise the spinner would be present in the system locale and it would be weird if it happens * that the modal buttons are in one locale (app) while the (spinner) month names are another (system) */ -export default withLocalize(React.forwardRef((props, ref) => ( - /* eslint-disable-next-line react/jsx-props-no-spreading */ - -))); +export default compose( + withLocalize, + withKeyboardState, + )(React.forwardRef((props, ref) => ( + /* eslint-disable-next-line react/jsx-props-no-spreading */ + + ))); From 4cac70b0c7006e405138fc4ea748980064d8439e Mon Sep 17 00:00:00 2001 From: tienifr Date: Fri, 13 Jan 2023 14:16:20 +0700 Subject: [PATCH 2/6] fix: lint --- src/components/DatePicker/index.ios.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js index ab3205e2a41f..4bb106ec7b39 100644 --- a/src/components/DatePicker/index.ios.js +++ b/src/components/DatePicker/index.ios.js @@ -3,7 +3,7 @@ import React from 'react'; import {Button, View, Keyboard} from 'react-native'; import RNDatePicker from '@react-native-community/datetimepicker'; import moment from 'moment'; -import _, { compose } from 'underscore'; +import _, {compose} from 'underscore'; import TextInput from '../TextInput'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import Popover from '../Popover'; @@ -37,13 +37,13 @@ class DatePicker extends React.Component { * @param {Event} event */ showPicker(event) { - if(this.props.isKeyboardShown){ + if (this.props.isKeyboardShown) { const listener = Keyboard.addListener('keyboardDidHide', () => { this.setState({isPickerVisible: true}); listener.remove(); }); Keyboard.dismiss(); - }else{ + } else { this.setState({isPickerVisible: true}); } this.initialValue = this.state.selectedDate; @@ -145,7 +145,7 @@ DatePicker.defaultProps = defaultProps; export default compose( withLocalize, withKeyboardState, - )(React.forwardRef((props, ref) => ( - /* eslint-disable-next-line react/jsx-props-no-spreading */ - - ))); +)(React.forwardRef((props, ref) => ( + /* eslint-disable-next-line react/jsx-props-no-spreading */ + +))); From 7ad8af9d4e92bf28e8041ec905448b138cd907e3 Mon Sep 17 00:00:00 2001 From: tienifr Date: Fri, 13 Jan 2023 16:05:11 +0700 Subject: [PATCH 3/6] change compose, define keyboardStatePropTypes and add explain for the solution --- src/components/DatePicker/index.ios.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js index 4bb106ec7b39..5dc48386200d 100644 --- a/src/components/DatePicker/index.ios.js +++ b/src/components/DatePicker/index.ios.js @@ -3,7 +3,8 @@ import React from 'react'; import {Button, View, Keyboard} from 'react-native'; import RNDatePicker from '@react-native-community/datetimepicker'; import moment from 'moment'; -import _, {compose} from 'underscore'; +import _ from 'underscore'; +import compose from '../../libs/compose'; import TextInput from '../TextInput'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import Popover from '../Popover'; @@ -11,11 +12,12 @@ import CONST from '../../CONST'; import styles from '../../styles/styles'; import themeColors from '../../styles/themes/default'; import {propTypes, defaultProps} from './datepickerPropTypes'; -import withKeyboardState from '../withKeyboardState'; +import withKeyboardState, {keyboardStatePropTypes} from '../withKeyboardState'; const datepickerPropTypes = { ...propTypes, ...withLocalizePropTypes, + ...keyboardStatePropTypes, }; class DatePicker extends React.Component { @@ -37,6 +39,10 @@ class DatePicker extends React.Component { * @param {Event} event */ showPicker(event) { + /** + * Ios will auto dismiss the keyboard when popover is opened and open again when it's closed + * We need the keyboardDidHide listener to make sure that the popover will only be opened after the keyboard is closed + */ if (this.props.isKeyboardShown) { const listener = Keyboard.addListener('keyboardDidHide', () => { this.setState({isPickerVisible: true}); From c4dfbde1107c33bc1e8c17fe11a0075cc64ff1ea Mon Sep 17 00:00:00 2001 From: tienifr <113963320+tienifr@users.noreply.github.com> Date: Sat, 14 Jan 2023 10:59:30 +0700 Subject: [PATCH 4/6] Update src/components/DatePicker/index.ios.js Co-authored-by: Jasper Huang --- src/components/DatePicker/index.ios.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js index 5dc48386200d..2a7de5f706b2 100644 --- a/src/components/DatePicker/index.ios.js +++ b/src/components/DatePicker/index.ios.js @@ -39,10 +39,8 @@ class DatePicker extends React.Component { * @param {Event} event */ showPicker(event) { - /** - * Ios will auto dismiss the keyboard when popover is opened and open again when it's closed - * We need the keyboardDidHide listener to make sure that the popover will only be opened after the keyboard is closed - */ + // Opens the popover only after the keyboard is hidden to avoid a "blinking" effect where the keyboard was on iOS + // See https://github.com/Expensify/App/issues/14084 for more context if (this.props.isKeyboardShown) { const listener = Keyboard.addListener('keyboardDidHide', () => { this.setState({isPickerVisible: true}); From f91aaaf7e6d636f4bbe8bf77cef9f0b027f2650b Mon Sep 17 00:00:00 2001 From: tienifr <113963320+tienifr@users.noreply.github.com> Date: Sat, 14 Jan 2023 11:00:33 +0700 Subject: [PATCH 5/6] Update src/components/DatePicker/index.ios.js Co-authored-by: Jasper Huang --- src/components/DatePicker/index.ios.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js index 2a7de5f706b2..a00bfee65222 100644 --- a/src/components/DatePicker/index.ios.js +++ b/src/components/DatePicker/index.ios.js @@ -41,15 +41,17 @@ class DatePicker extends React.Component { showPicker(event) { // Opens the popover only after the keyboard is hidden to avoid a "blinking" effect where the keyboard was on iOS // See https://github.com/Expensify/App/issues/14084 for more context - if (this.props.isKeyboardShown) { - const listener = Keyboard.addListener('keyboardDidHide', () => { - this.setState({isPickerVisible: true}); - listener.remove(); - }); - Keyboard.dismiss(); - } else { + // Opens the popover only after the keyboard is hidden to avoid a "blinking" effect where the keyboard was on iOS. + // See https://github.com/Expensify/App/issues/14084 for more context + if (!this.props.isKeyboardShown) { + this.setState({isPickerVisible: true}); + return; + } + const listener = Keyboard.addListener('keyboardDidHide', () => { this.setState({isPickerVisible: true}); - } + listener.remove(); + }); + Keyboard.dismiss(); this.initialValue = this.state.selectedDate; event.preventDefault(); } From 7452c316e5e96dc6c81c1ab0689be3a3d6144f40 Mon Sep 17 00:00:00 2001 From: tienifr Date: Sat, 14 Jan 2023 11:01:40 +0700 Subject: [PATCH 6/6] fix: issue --- src/components/DatePicker/index.ios.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js index a00bfee65222..6f37202cfadb 100644 --- a/src/components/DatePicker/index.ios.js +++ b/src/components/DatePicker/index.ios.js @@ -41,12 +41,10 @@ class DatePicker extends React.Component { showPicker(event) { // Opens the popover only after the keyboard is hidden to avoid a "blinking" effect where the keyboard was on iOS // See https://github.com/Expensify/App/issues/14084 for more context - // Opens the popover only after the keyboard is hidden to avoid a "blinking" effect where the keyboard was on iOS. - // See https://github.com/Expensify/App/issues/14084 for more context if (!this.props.isKeyboardShown) { this.setState({isPickerVisible: true}); return; - } + } const listener = Keyboard.addListener('keyboardDidHide', () => { this.setState({isPickerVisible: true}); listener.remove();