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鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
SectionList ListHeaderComponent gets rerendered when sections data changes #23400
Comments
Can you run If you believe this information is irrelevant to the reported issue, you may write |
Thanks for the great repro! I'm not sure what the issue is, but re-mounting sounds like a likely candidate. |
I am closing this issue because it does not contain the necessary environment info, and there has been no followup in a while. If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here. |
H盲??? wtf? There is no need for envinfo as it doesn't matter. It happens on the latest RN release and I have a snack that reproduces the issue. @facebook-github-bot reopen |
Yeah, it is still an issue. Happens everytime you empty your |
I'd like to note this behavior also occurs on the |
Still experiencing this issue, sad to see bot closing it and nobody doing anything about it. |
As a dirty workaround I simply turn on the autofocus if there is some query already inputed: private renderSearchHeader = () => {
const { searchQuery, setSearchQuery } = this.props;
return (
<Translation ns="common">
{t => (
<Row
style={{ padding: 10, backgroundColor: 'white', height: 56 }}
vertical="center"
>
<Icon
name="magnify"
size={22}
color={variables.colors.disabledActionItem}
/>
<TextInput
style={{ flex: 1 }}
placeholder={t('search')}
value={searchQuery}
onChangeText={setSearchQuery}
autoFocus={!!searchQuery} // Get around RN bug
/>
</Row>
)}
</Translation>
);
}; |
馃悰 Bug Report
This is a duplicate of:
#16824
#16823
#14249
But since those 3 were closed and they are missing a reproducible example of the bug I'm reopening.
Description
If one uses a TextInput as a ListHeaderComponent when searching and when the returned sections are empty the TextInput loses focus.
If when searching the sections still have data - then the TextInput in the ListHeaderComponent doesn't lose focus.
To Reproduce
https://snack.expo.io/H12h3BgHV
Expected Behavior
I would expect for the TextInput not to lose focus
Code Example
https://snack.expo.io/H12h3BgHV
Environment
[skip envinfo]
RN 0.58
I've been trying to debug this with @pawelczerepak and what we noticed is that VirtualizedCellWrapper
https://github.com/facebook/react-native/blob/master/Libraries/Lists/VirtualizedList.js#L1759
gets unmounted and mounted when sections is an empty array. And when this happens everything inside of it gets unmounted and mounted again.
@sahrens - any ideas on what might be going on here?
The text was updated successfully, but these errors were encountered: