FlashList TextInput: Focus/Text Duplication on Scroll
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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