-
Notifications
You must be signed in to change notification settings - Fork 3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[HOLD for payment 2023-01-25] [$1000] Bank account : The bottom section of Personal Information blinks when opening and closing DatePicker #14084
Comments
My first few of these, so taking the template from StackOverflowTeams: https://stackoverflowteams.com/c/expensify/questions/14418
Yeah, this happens for me too on v1.2.52.3. ted@expensify.com: RPReplay_Final1673393070.MP4Going to add External now. |
Job added to Upwork: https://www.upwork.com/jobs/~010fdafccebe9cfd56 |
Current assignee @twisterdotcom is eligible for the External assigner, not assigning anyone new. |
Triggered auto assignment to Contributor-plus team member for initial proposal review - @mollfpr ( |
Triggered auto assignment to @jasperhuangg ( |
Proposal diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js
index d0945e060..f456fbc95 100644
--- a/src/components/DatePicker/index.ios.js
+++ b/src/components/DatePicker/index.ios.js
@@ -30,16 +30,31 @@ class DatePicker extends React.Component {
this.reset = this.reset.bind(this);
this.selectDate = this.selectDate.bind(this);
this.updateLocalDate = this.updateLocalDate.bind(this);
+ this.delayOpenDatePicker = this.delayOpenDatePicker.bind(this);
+ this.timer = null;
+ }
+
+ componentWillUnmount() {
+ clearTimeout(this.timer);
+ }
+
+ delayOpenDatePicker = () => {
+ this.timer = setTimeout(() => {
+ this.setState({isPickerVisible: true});
+ }, 200);
}
/**
* @param {Event} event
*/
showPicker(event) {
+ if (this.timer) {
+ clearTimeout(this.timer);
+ }
Keyboard.dismiss();
this.initialValue = this.state.selectedDate;
- this.setState({isPickerVisible: true});
event.preventDefault();
+ this.delayOpenDatePicker();
}
/**
Reuslt: Screen.Recording.2023-01-11.at.11.43.26.movcc @Gonals since you already worked with this kind of DatePicker issue. |
Should we use InteractionManager instead? @hungvu193 |
@dinhhien2006 I already tried with InteractionManager but seems It doesn't work so I need to use timeout. |
ProposalThis issue is related to the general iOS issue about how it works with modals & keyboard opening & closing after each other SolutionWe should use a keyboardDidHide listener & then open the picker only after the keyboard has been closed diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js
index d0945e060..48dc00262 100644
--- a/src/components/DatePicker/index.ios.js
+++ b/src/components/DatePicker/index.ios.js
@@ -36,9 +36,12 @@ class DatePicker extends React.Component {
* @param {Event} event
*/
showPicker(event) {
+ const listener = Keyboard.addListener('keyboardDidHide', () => {
+ this.setState({isPickerVisible: true});
+ listener.remove();
+ });
Keyboard.dismiss();
this.initialValue = this.state.selectedDate;
- this.setState({isPickerVisible: true});
event.preventDefault();
} |
ProposalProblemIn App/src/components/DatePicker/index.ios.js Lines 38 to 43 in 5a09253
The action SolutionIn App/src/components/DatePicker/index.ios.js Lines 38 to 43 in 5a09253
If keyboard is opening => I'll dismiss keyboard and open popover in diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js
index d0945e0607..04378da86a 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,17 @@ class DatePicker extends React.Component {
* @param {Event} event
*/
showPicker(event) {
- Keyboard.dismiss();
+ if(this.props.isKeyboardShown){
+ Keyboard.dismiss();
+ const listener = Keyboard.addListener('keyboardDidHide', () => {
+ this.setState({isPickerVisible: true});
+ listener.remove();
+ });
+ }else{
+ this.setState({isPickerVisible: true});
+ }
this.initialValue = this.state.selectedDate;
- this.setState({isPickerVisible: true});
event.preventDefault();
}
@@ -134,7 +143,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 */
- <DatePicker {...props} innerRef={ref} />
-)));
+export default compose(
+ withLocalize,
+ withKeyboardState,
+ )(React.forwardRef((props, ref) => (
+ /* eslint-disable-next-line react/jsx-props-no-spreading */
+ <DatePicker {...props} innerRef={ref} />
+ )));
ResultScreen.Recording.2023-01-11.at.16.07.43.mp4 |
Reviewing now! |
@tienifr Just a small note, move the listener to be above the |
@hungvu193 I still see the blinks in your proposal and we avoid using Screen.Recording.2023-01-12.at.21.46.48.mov |
@priyeshshah11 While your proposal fixing the issue, after the date picker close I can't open again the date picker. Screen.Recording.2023-01-12.at.21.50.08.mov |
I think the problem in my solution is that it only works when the keyboard is open as I forgot about the case when the keyboard is closed, which I think should be solved in @tienifr's proposal but we should setup the listener before calling keyboard.dismiss() diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js
index d0945e0607..04378da86a 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,17 @@ 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 +143,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 */
- <DatePicker {...props} innerRef={ref} />
-)));
+export default compose(
+ withLocalize,
+ withKeyboardState,
+ )(React.forwardRef((props, ref) => (
+ /* eslint-disable-next-line react/jsx-props-no-spreading */
+ <DatePicker {...props} innerRef={ref} />
+ ))); |
@s77rt Thanks for pointing that out. Yeah we can put the logic open modal before dismissing keyboard just to make sure everything works well 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();
}
|
Okay, I think @tienifr proposal's working well. With update here and also replacing the lodash compose with our cc @jasperhuangg @twisterdotcom 🎀 👀 🎀 C+ reviewed! |
Hey @mollfpr I agree that @tienifr's proposal is ideal. Assigning! Thanks to everyone else for your proposals!
Thanks again :) |
📣 @tienifr You have been assigned to this job by @jasperhuangg! |
Agreed, I normally would but I had some setup issues which was preventing me from testing thoroughly but will be 100% sure next time. @jasperhuangg Do I deserve any partial reward as the accepted proposal kind of uses the same idea from my proposal & even that proposal wasn't complete like mine? just asking 😅 |
@jasperhuangg Thanks, I've applied to the job, the PR is already created |
The solution for this issue has been 🚀 deployed to production 🚀 in version 1.2.55-0 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue: If no regressions arise, payment will be issued on 2023-01-25. 🎊 After the hold period, please check if any of the following need payment for this issue, and if so check them off after paying:
As a reminder, here are the bonuses/penalties that should be applied for any External issue:
|
BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:
|
I wouldn't say that any specific PR introduced this bug. If anything, it's pretty difficult to look out for this specific bug and I wouldn't blame anyone for not catching it before merging their PR. It's a very minor visual glitch that doesn't affect behavior anywhere. Therefore, I'm checking off the 2 todos involving any follow-up on a PR. With that being said, I'll still start a discussion in #expensify-bugs about minor visual glitches like this |
@mollfpr and @hungvu193 - could you both please apply on the UpWork job for your payments please: https://www.upwork.com/jobs/~010fdafccebe9cfd56 |
@tienifr offer sent for you to accept. |
@twisterdotcom Thanks, I've applied! |
@twisterdotcom Applied, just for a reminder mine will reduce the cause of the regression. |
Payments sent for @mollfpr and @hungvu193. |
@twisterdotcom I’ve accepted the offer, thanks! |
Nice. Paid with bonus. |
I think this caused another regression of #14529 |
If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!
Actions Performed:
Expected Result:
The Date Picker should be closed without any blinking.
Actual Result:
The bottom section of the page is blinking after Date Picker closes.
Workaround:
unknown
Platforms:
Which of our officially supported platforms is this issue occurring on?
Version Number: v1.2.50-0
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:
RPReplay_Final1672983151.MP4
QXZT6339.1.MP4
Expensify/Expensify Issue URL:
Issue reported by: @hungvu193
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1672983560696649
View all open jobs on GitHub
Upwork Automation - Do Not Edit
The text was updated successfully, but these errors were encountered: