react-native: [Android][Talkback] Can't focus on TextInput via double tap

🐛 Bug Report

When using <TextInput> in combination with TalkBack on android you can’t double tap to give the field focus. Double tap and hold on the other hand works to give focus and providing the context menu (paste, select all etc)

To Reproduce

Add <TextInput /> to your project and start TalkBack, swipe your way to the <TextInput /> and double tap. You will get a “thump” sounding sound and nothing else will happen. Android 8.0(API 26+) or greater is needed to reproduce, earlier versions everything seems to work as expected.

Expected Behavior

Focus to be set to the TextInput and keyboard showing.

Code Example

export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <TextInput />
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}

Other

If you add an accessible view around the TextInput and you double tap that focus correctly goes to the TextInput.

<View accessible accessibilityLabel="Double tap me!" >
  <TextInput />
</View>

Environment

  React Native Environment Info:
    System:
      OS: macOS 10.14.4
      CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
      Memory: 1.04 GB / 32.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.15.0 - ~/.nvm/versions/node/v8.15.0/bin/node
      Yarn: 1.13.0 - /usr/local/bin/yarn
      npm: 6.4.1 - ~/.nvm/versions/node/v8.15.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
      Android SDK:
        API Levels: 28
        Build Tools: 28.0.3
        System Images: android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.3 AI-182.5107.16.33.5199772
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: ^0.59 => 0.59.5 
    npmGlobalPackages:
      react-native-cli: 2.0.1

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 6
Comments: 25 (5 by maintainers)

Most upvoted comments

Hello!!

I had the same issue and from what I’ve been researching, React Native disables natively received “requests” for focus (Android). But I found a way, wrapping the TextInput in a TouchableWithoutFeedback.

It went something like this:

focusInput = () => {
    this.input && this.input.focus();
  };

<TouchableWithoutFeedback onPress={this.focusInput} accessible={false}>
  <View style={[style, styles.main]}>
    <TextInput
      accessible={true}
      ref={(ref) => this.input}
      importantForAccessibility="no"
    />
  </View>
</TouchableWithoutFeedback>

So the focus is given by the java script code when the TouchableWithoutFeedback is clicked. The importantForAccessibility = “no” property is used to prevent TextInput from being focused with TalkBack.

+11

fhugoduarte on Apr 23, 2019

hey @fabriziobertoglio1987 how are you? I managed to solve this problem by updating to version 0.70, thanks 😃

GuilhermePortella on Jan 27, 2023

I’m investigating an issue that sounds like it might be similar, but I’m not sure if it’s exactly the same - what I’m observing is that double tap will focus the TextInput the first time, but it won’t work again after dismissing the keyboard with the hardware back button. Is everyone else seeing that double tap never works? Or is this the same issue?

ejanzer on Feb 5, 2020

hey @fabriziobertoglio1987 how are you? I managed to solve this problem by updating to version 0.70, thanks 😃

Thanks a lot. I’m very very good. I wish you a good weekend. Thanks for updating us on the status. 🙏

fabOnReact on Jan 30, 2023

no, the issue has not been fixed. could you add it ot the discussion?

adil-s on Aug 22, 2019