react / react/react-native

SectionList ListHeaderComponent gets rerendered when sections data changes

Abierto
#23,400 8 comentarios 2 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Bug Component: SectionList Ran Commands
Lenguaje dominante
C++
Estrellas
127k
Forks
25.3k
Merge medio
1 d 23 h
PR fusionados (30 d)
4

Descripción

🐛 Bug Report

This is a duplicate of:
https://github.com/facebook/react-native/issues/16824
https://github.com/facebook/react-native/issues/16823
https://github.com/facebook/react-native/issues/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?

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Reproduce la pérdida de foco con el ejemplo de Snack y, después, inspecciona el código de VirtualizedCellWrapper alrededor de la línea 1759 de Libraries/Lists/VirtualizedList.js. Sigue el motivo por el que se desmonta y se vuelve a montar cuando sections queda vacío, y verifica que el TextInput de ListHeaderComponent permanezca enfocado mientras cambian los datos de las secciones.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
react-native
Área
mobile
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.