Skip to content

FlashList TextInput: Focus/Text Duplication on Scroll #1980

@krishnan-456

Description

@krishnan-456

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

FlashList.TextInput.Issue.1547.mp4

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions