Can't focus into text fields, Android + external keyboard

[brucelawson]

In the first Expo example on https://reactnative.dev/docs/textinput - with an external physical keyboard on Android, we don't seem to be able to move the focus into/ between these input fields. It's fine if you tap the screen, and it's fine if Talkback is on and we alt+arrow between the fields. But with Talkback off, and just using the keyboard, we can't get focus into the fields.

Expected Results

That the fields can be focussed by the keyboard

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

https://snack.expo.io/PT9eBWga1 (saved from the first example on https://reactnative.dev/docs/textinput)

[brucelawson]

Same issue can be seen on Facebook Marketplace. Our workaround was to wrap the textinput in a Pressable and set focus manually.

[kriti18singh]

@brucelawson we are also facing this issue. Could you share the code snippet? Also, are you able to get it working on ios?

[brucelawson]

@kriti18singh I will once we've tested and proved it. (I don't want to let something loose without knowing its side-effects)

[brucelawson]

Commit 8 days ago appears related d4a498a

[alextait1]

Hey @brucelawson thanks for submitting this issue, we'll take a closer look soon and report back!

[alextait1]

@brucelawson: We've taken a look as a team and will pull this into our prioritized issues, will report back when it's in progress. Thanks again for submitting.

[pandu-supriyono]

Hi @alextait1, I would love to know if there are any updates on this matter. In the mean time we're looking at workarounds as described in #30464.

[alextait1]

Hey @pandu-supriyono I'm no longer working on this project, maybe @blavalla can provide an update

[ArturKalach]

Hello here,
The easiest way it's wrapping TextField in something, I wrote specific lib to support keyboard focus for a11y:
https://www.npmjs.com/package/react-native-a11y

You can wrap TextInput into KeyboardFocusView and focus TextInput on onFocusChanged event.

    <KeyboardFocusView onFocusChanged={(e) => {
            if(e.nativeEvent.isFocused) {
              ref.focus()
            }
          }}>
            <TextInput
              ref={inputRef}
            />
          </KeyboardFocusView>

I can imagine more elegant solution on old arch, but new arch is hell challenging

[ArturKalach]

There are a tricky fix from the native side: https://github.com/ArturKalach/react-native-a11y/blob/master/docs/AndroidInput.md

[nedgip]

Are there any plans to fix the keyboard accessibility of the <TextInput>?

The workaround #30464 to wrap the <TextInput> in a <Pressable> doesn't work with the Tab key and doesn't support keyboard users who also use a screen reader.

The React Native <TextInput> should be accessible using a physical keyboard out-of-the-box without implementing workarounds as it is a critical element for many apps.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.

[sharad-incapsulate]

Is there any proper solution to make it work as expected ? I am still facing this issue.

[chimiWangchukWangdi]

Same here

[brucelawson]

Great to see the priority given to this accessibility bug! It's 2 years, 8 months and 29 days since I posted it.

[ArturKalach]

Hello there,

After some work with the native and a keyboard focus, I finally found a workaround for TextInput focusability. You can find it in the react-native-external-keyboard package, in the component called KeyboardExtendedTextInput.

The solution works for Android and iOS, and support new arch (bridgeless is not supported).

[proohit]

Is there any news on this? We also need to make sure TextInput is focusable with an external keyboard.

[BogdanCerovac]

Can not re-open this, so I created a new one: #45801 (with additional related test case)...

[BogdanCerovac]

@jamonholmgren - thank you for re-opening this.

Temporary solution seems to be using the packages made by @ArturKalach, but I hope React Native can support external keyboard out of the box for all the folks not aware of the issue.