microsoft / microsoft/react-native-windows

TextInput focusable property should match react-native

Open
#10,015 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area: TextInput enhancement Needs: Dev Design Workstream: Component Parity
Dominant language
C++
Stars
17.3k
Forks
1.2k
Avg merge
1d 13h
Merged PRs (30d)
33

Description

Problem Description

When TextInput has "focusable = false" you can't edit/copy/paste from it while you can in IOS/Android (and it looks like Web has no implementation of focusable).

On RNW, focusable to mapped to isTabStop and isEnabled (with isTabStop making the TextInput not being able to tab through or edit). Focusable is also the only way to access isEnabled and the visuals that come with it. We should discuss what properties we want focusable to be linked too for TextInput and if there's a better property to expose isEnabled.

Steps To Reproduce
  1. Set any TextInput to with focusable = false, you won't be able to edit it
Expected Results

You should be able to edit a TextInput with focusable="false"

CLI version

npx react-native --version

Environment
npx react-native info
Target Platform Version

10.0.19041

Target Device(s)

Desktop

Visual Studio Version

Visual Studio 2019

Build Configuration

Debug

Snack, code example, screenshot, or link to a repository

https://snack.expo.dev/@tatianak/textinput-focusable

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

Reproduce the behavior with the linked Snack and compare React Native Windows TextInput handling with iOS and Android. Trace how focusable is mapped to isTabStop and isEnabled, then determine the intended relationship before adding coverage for editing, copying, and pasting with focusable=false.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native
Domain
desktop, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.