Shopify / Shopify/flash-list

FlashList v2 (Android): tap-to-edit focuses the wrong row's TextInput

Open
#2,299 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Description

On Android, when a FlashList row's tap handler swaps that row from a TouchableOpacity to an autofocused TextInput, the focused TextInput ends up on a different row than the one tapped. Tapping Item 10 may focus Item 3's TextInput with "Item 3" shown as the initial value. FlatList with identical row markup does not exhibit this.

Current behavior

Tap a row in the middle of a scrolled FlashList. On Android:

  • A different row becomes the focused / editing row.
  • That row's TextInput shows its own name as the initial value.
  • The on-screen editingId debug text reflects the other row's id.
  • Sometimes the tap does not work. Keyboard appears and hides quickly.

https://github.com/user-attachments/assets/5e07a6ed-8ceb-483f-86a3-ca2d30ccbf9f

Expected behavior

The tapped row's TextInput is the one that mounts and gains focus, with the tapped row's name as the initial value — same as FlatList.

Reproduction

Expo Snack or minimal reproduction link:

https://snack.expo.dev/@2shrestha22/flash-list-with-text-input-bug

Platform

  • iOS
  • Android
  • Web (if applicable)

Environment

React Native info output:
System:
  OS: macOS 15.x
  Shell: zsh
Binaries:
  Node: 20.20.2
  Yarn: 4.12.0
SDKs:
  iOS SDK: present (not used for this report)
  Android SDK: present
Languages:
  Java: 17.x
npmPackages:
  react: 19.1.0
  react-native: 0.81.5
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

FlashList version: 2.0.2 (Expo SDK 54 bundled version) — also reproduced on 2.3.1
Expo SDK: 54

Additional context

  • The reproduction uses no keyboard library, gesture-handler wrapper, or bottom sheet.
  • FlatList with identical row markup and props does not exhibit the symptom.

Checklist

  • I've searched existing issues and couldn't find a duplicate
  • I've provided a minimal reproduction
  • 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 with the linked Expo Snack reproduction and compare the FlashList and FlatList implementations using the same row markup. Reproduce the Android tap-to-edit behavior on a scrolled list, then trace the FlashList row mounting and focus path. Done means the tapped row mounts its TextInput, displays its own name, and retains focus reliably.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, react-native
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.