SectionList loses focus when search/filter returns no results / EmptyList component doesn't work with default data structure

[gregblass]

Using RN v0.45.0-rc.1

This is quite a doozy so apologies in advance for my poor attempt to explain it.

I'm doing a standard filtering based on a search textinput on a SectionList, almost exactly as the example in the SectionList illustrates (see the example on the bottom of the page here: https://facebook.github.io/react-native/docs/sectionlist.html)

This example assumes that there will always be some data that is hard coded in, which is not the case in the real world.

For some reason, if the search/filter text entered into the textinput here doesn't match, it seems like the entire search input may be re-rendered - and the focus on the textinput is lost.

I found a way around that:

var data = [{ data: [], key: 'no-results' }]

and then go from there. This allows the SectionList/TextInput search pattern to work correctly - that is, if there are no results, the textinput doesn't lose focus.

The issue then becomes the ListEmptyComponent element. On a standard FlatList, this works as expected. But on a SectionList, the only way that it will correctly render the EmptyList element is if its passed an empty array into its data prop.

But this puts me back at square one - passing in an empty array to the section list's data prop, for some reason, causes the search bar/text input to lose focus (when no results are returned from the search/filtering).

[gregblass]

This probably needs an Expo snack, but I figured I'd at least try to throw it up here in case anyone has experienced the same thing or may have any clue as to what I'm talking about.

[hramos]

Hey @gregblass thanks for filing an issue! It looks like this sort of discussion is better suited for
StackOverflow.

[gregblass]

... Seems like a bug to me.

[gregblass]

Yeah I'd totally argue against that. Its a discussion for github.

[hramos]

If you'd like to file this as an issue, can you update your original post to use the new issue template that we provide?

[gregblass]

Sure. I'll try to make an expo snack too when I have a chance.

Either the SectionList ListEmptyComponent needs to be able to work with the empty data structure that the SectionList itself seems to need to work properly ([{ data: [], key: null }]), or the SectionList needs to not re-render the entire component when passed an empty array. Otherwise it is impossible to use a SectionList with a TextInput in its ListHeaderComponent as a search bar properly.

[gregblass]

Alright I made a snack to show a working example of the issue. Expo is on RN 0.44, so it doesn't have the latest changes made to the List components to add support for the EmptyList components.

What I found was that the issue I'm experiencing with the search input losing focus if the data is passed in as an empty array isn't happening.

So I've got to investigate further as to where the issue is coming in from. I forked the 0.44 Expo RN and added the ListEmpty code, so it may be due to that.

[FlaviooLima]

Same here.
Hacking this bug by, putting the searcher outside the "ListHeaderComponent".

[pull-bot]

@facebook-github-bot icebox

[facebook-github-bot]

@facebook-open-source-bot tells me to close this issue because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

- Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
- If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
- Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[tharungeorgebabu]

we are using react native .50
This issue still prevails:

• when using section list
• the search input looses focus
• when search/filter returns no results