SectionList ListHeaderComponent gets rerendered when sections data changes

[compojoom]

🐛 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?

[react-native-bot]

Can you run react-native info and edit your issue to include these results under the Environment section?

If you believe this information is irrelevant to the reported issue, you may write [skip envinfo] under Environment to let us know.

[sahrens]

Thanks for the great repro! I'm not sure what the issue is, but re-mounting sounds like a likely candidate.

[react-native-bot]

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.

[compojoom]

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

@sahrens?

[kneza23]

Yeah, it is still an issue. Happens everytime you empty your sections. Shame that this is closed. Anyone has at least a hack/quick fix to resolve this?

[eahrold]

I'd like to note this behavior also occurs on the ListFooterComponent.

[ospfranco]

Still experiencing this issue, sad to see bot closing it and nobody doing anything about it.

[ospfranco]

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>
    );
  };