-
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
fix: Timezone changes to some 1st option in the list while pressing the enter key #14466
Changes from all commits
7f5cfc9
448f2d6
89d5c26
1cf7475
53cd36d
1e9f6a0
d87af85
6b14395
7771155
bcf1a93
58fc153
66da193
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -39,9 +39,11 @@ class BaseOptionsSelector extends Component { | |
this.relatedTarget = null; | ||
|
||
const allOptions = this.flattenSections(); | ||
const focusedIndex = this.getInitiallyFocusedIndex(allOptions); | ||
|
||
this.state = { | ||
allOptions, | ||
focusedIndex: this.props.shouldTextInputAppearBelowOptions ? allOptions.length : 0, | ||
focusedIndex, | ||
}; | ||
} | ||
|
||
|
@@ -84,6 +86,8 @@ class BaseOptionsSelector extends Component { | |
true, | ||
); | ||
|
||
this.scrollToIndex(this.state.focusedIndex, false); | ||
|
||
if (!this.props.autoFocus) { | ||
return; | ||
} | ||
|
@@ -135,6 +139,25 @@ class BaseOptionsSelector extends Component { | |
} | ||
} | ||
|
||
/** | ||
* @param {Array<Object>} allOptions | ||
* @returns {Number} | ||
*/ | ||
getInitiallyFocusedIndex(allOptions) { | ||
const defaultIndex = this.props.shouldTextInputAppearBelowOptions ? allOptions.length : 0; | ||
if (_.isUndefined(this.props.initiallyFocusedOptionKey)) { | ||
return defaultIndex; | ||
} | ||
|
||
const indexOfInitiallyFocusedOption = _.findIndex(allOptions, option => option.keyForList === this.props.initiallyFocusedOptionKey); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @tienifr enhancement: we should skip this const defaultIndex = this.props.shouldTextInputAppearBelowOptions ? allOptions.length : 0;
if (_.isUndefined(props.initiallyFocusedOptionKey)) {
return defaultIndex;
}
const intiallyFocusedOptionIndex = _.findIndex(allOptions, option => option.keyForList === this.props.initiallyFocusedOptionKey);
if (intiallyFocusedOptionIndex === -1) {
return defaultIndex;
}
return intiallyFocusedOptionIndex; There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @rushatgabhane updated according to your suggestion, with the minor variation where the Thanks
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. that's good reasoning. looks good! |
||
|
||
if (indexOfInitiallyFocusedOption >= 0) { | ||
return indexOfInitiallyFocusedOption; | ||
} | ||
|
||
return defaultIndex; | ||
} | ||
|
||
/** | ||
* Flattens the sections into a single array of options. | ||
* Each object in this array is enhanced to have: | ||
|
@@ -175,8 +198,9 @@ class BaseOptionsSelector extends Component { | |
* Scrolls to the focused index within the SectionList | ||
* | ||
* @param {Number} index | ||
* @param {Boolean} animated | ||
*/ | ||
scrollToIndex(index) { | ||
scrollToIndex(index, animated = true) { | ||
const option = this.state.allOptions[index]; | ||
if (!this.list || !option) { | ||
return; | ||
|
@@ -195,7 +219,7 @@ class BaseOptionsSelector extends Component { | |
} | ||
} | ||
|
||
this.list.scrollToLocation({sectionIndex: adjustedSectionIndex, itemIndex}); | ||
this.list.scrollToLocation({sectionIndex: adjustedSectionIndex, itemIndex, animated}); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. With the changes we would be animating all the question: was it always like this before? does There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @rushatgabhane yes, Reference: https://reactnative.dev/docs/sectionlist, the |
||
} | ||
|
||
/** | ||
|
@@ -265,7 +289,13 @@ class BaseOptionsSelector extends Component { | |
showTitleTooltip={this.props.showTitleTooltip} | ||
isDisabled={this.props.isDisabled} | ||
shouldHaveOptionSeparator={this.props.shouldHaveOptionSeparator} | ||
onLayout={this.props.onLayout} | ||
onLayout={() => { | ||
this.scrollToIndex(this.state.focusedIndex, false); | ||
|
||
if (this.props.onLayout) { | ||
this.props.onLayout(); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @tienifr there's a "flash" / flicker when you click on timezone Make sure to test on a physical android device. I think it has something to do with scrollToIndex and keyboard opening at the same time. WhatsApp.Video.2023-01-31.at.01.23.23.mp4There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Here's WhatsApp.Video.2023-01-31.at.05.12.38.mp4There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @rushatgabhane pushed the fix. It's working fine as below: Screenrecorder-2023-01-31-10-23-50-964.mp4The reason was because of the The update was to run the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @rushatgabhane since it's close to passing the 6-days milestone since the issue was assigned, I'd appreciate if we can coordinate to move this quickly. Thanks! There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. thanks, left a review #14466 (review) i think There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. nevermind ^, i think it was some random issue bug because i was doing something wrong. |
||
} | ||
}} | ||
/> | ||
) : <FullScreenLoadingIndicator />; | ||
return ( | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -88,8 +88,9 @@ class TimezoneSelectPage extends Component { | |
onChangeText={this.filterShownTimezones} | ||
onSelectRow={this.saveSelectedTimezone} | ||
optionHoveredStyle={styles.hoveredComponentBG} | ||
sections={[{data: this.state.timezoneOptions}]} | ||
sections={[{data: this.state.timezoneOptions, indexOffset: 0}]} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @tienifr hey, I don't understand this change. Could you please help me out here 🙇♂️ why do we need to pass There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @rushatgabhane it’s for showing the focus style (background color changing) for the focused option. At timezone selection page, we forget to pass the indexOffset to the sections making the option item focus style didn't show. |
||
shouldHaveOptionSeparator | ||
initiallyFocusedOptionKey={this.currentSelectedTimezone} | ||
/> | ||
</ScreenWrapper> | ||
); | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -1788,7 +1788,7 @@ const styles = { | |
}, | ||
|
||
borderTop: { | ||
borderTopWidth: 1, | ||
borderTopWidth: variables.borderTopWidth, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. nice! |
||
borderColor: themeColors.border, | ||
}, | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@tienifr
suggestion: i think this is slightly easier to read
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@rushatgabhane I think the above might be incorrect since the offset that's pushed to
flatArray
is supposed to be for this item. Meaning we should not add this item's height to the offset before pushing to theflatArray
(the offset should be the sum of all the heights of the items before this item). That's why the offset calculation happens after theflatArray.push
in the current code, the next item will use this calculated offset, not this itemThis comment was marked as outdated.
Sorry, something went wrong.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ah yes you're right.
offset is the height till the top of the current option. we don't include the current option itself