FlashList TextInput: Focus/Text Duplication on Scroll

Aperta
  • Qualcosa non va?
#1,980 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 18 giorni

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
35/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
react-native, typescript
Ambito
mobile

Direzione di ricerca

Inizia eseguendo la riproduzione collegata di Expo Snack con FlashList 2.2.0 su iOS e Android, concentrandoti sul dare il focus e digitare nell’ultimo TextInput prima dello scorrimento. Traccia il comportamento di riciclo di TextInput di FlashList; il lavoro è completato quando il focus e il testo digitato rimangono associati esclusivamente all’elemento selezionato durante lo scorrimento.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bug P1

Current behavior

I have rendered a list of 40 TextInput fields. When I focus or typed on the last TextInput and scroll up, I notice that the focus and typed text is also applied to the first rendered TextInput.

"@shopify/flash-list": "^2.2.0",
"expo": "~54.0.20",
"react-native": "0.81.5",

Expected behavior

Focusing and typing in a TextInput within a long list should only affect the selected TextInput.

Reproduction

import { FlashList } from "@shopify/flash-list";
import React from "react";
import { StyleSheet, TextInput, View } from "react-native";

export default function App() {
  const data = Array.from({ length: 40 }, (_, index) => ({
    key: `${index}`,
    question: `Question ${index + 1}`,
  }));

  // Render each TextInput
  const renderItem = ({
    item,
  }: {
    item: { key: string; question: string };
  }) => (
    <View style={styles.itemContainer}>
      <TextInput style={styles.input} placeholder={item.question} />
    </View>
  );

  return (
    <View style={styles.container}>
      <FlashList
        data={data}
        renderItem={renderItem}
        keyExtractor={(item) => item.key}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  itemContainer: {
    marginBottom: 10,
  },
  input: {
    height: 40,
    borderColor: "gray",
    borderWidth: 1,
    paddingHorizontal: 8,
  },
});

https://github.com/user-attachments/assets/cece34db-7fbc-4121-b4f6-e1e38c485ce8

Expo Snack or minimal reproduction link:

https://snack.expo.dev/@krishnank/shopify-flashlist-bug

Platform

  • iOS
  • Android
  • Web (if applicable)

Environment

FlashList version: ^2.2.0

Checklist

  • I've searched existing issues and couldn't find a duplicate
  • I've provided a minimal reproduction (Expo Snack preferred)
  • I'm using the latest version of @shopify/flash-list
  • I've included all required information above
Lingua principale
TypeScript
Stelle
7.2k
Fork
401
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di Shopify/flash-list

Tutte le issue di Shopify/flash-list

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.