Shopify / Shopify/flash-list

FlashList TextInput: Focus/Text Duplication on Scroll

Open
#1,980 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug P1
Dominant language
TypeScript
Stars
7.2k
Forks
393
Avg merge
1d 3h
Merged PRs (30d)
1

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the linked Expo Snack reproduction with FlashList 2.2.0 on iOS and Android, focusing and typing in the last TextInput before scrolling. Trace the FlashList TextInput recycling behavior; done means focus and typed text remain associated only with the selected item during scrolling.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.