[Android][Talkback] Can't focus on TextInput via double tap

[PeoB]

🐛 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

[PeoB]

Same issue can be reproduced on amongst other, Facebook marketplace, the field "send message" can't be focused by double tap.

[fhugoduarte]

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.

[adil-s]

same here, I just wonder why accessibility is not being taken seriously! the first issue regarding this bug was open in 2017. but noone seems to care to fix it.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[adil-s]

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

[devlinb]

Is there going to be work done on this? It is basically not possible to write properly accessible apps on Android using RN until this is fixed. The work arounds posted break the navigation order, manually calling focus moves accessibility focus back to the start of the screen, so if filling out multiple text inputs fields the user has to navigate from the start back through all the ones they have filled out and then go to the next empty field.

[jeremywiebe]

We encountered this in our app and I was doing some exploratory testing to understand the bug better. A workaround I found is that if I two-finger tap in the text field, I can get it to focus and bring up the keyboard. Obviously that isn't a complete fix as it's an unexpected gesture for folks who are used to how TalkBack works.

[ejanzer]

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?

[xaviershay]

Testing with a Samsung S9.

Unsure if same issue, but I am seeing the following behaviour:

When TextInput is already focused but a keyboard is not shown, double tapping will not bring up the keyboard.

If the TextInput does not have focus, then double tapping brings up the keyboard as expected. Dismissing the keyboard leaves the focus on the TextInput, meaning it nows falls into the first class.

(This is a problem if there are no other inputs on the screen to "take" focus away from the input.)

I believe this is consistent with what @ejanzer described.

A workaround I found is that if I two-finger tap in the text field, I can get it to focus and bring up the keyboard.

This did not work for me.

[0xC0A1]

I'm having the exact same issue.

A workaround I found is that if I two-finger tap in the text field, I can get it to focus and bring up the keyboard.

^ This didn't work for me.

We encountered this in our app and I was doing some exploratory testing to understand the bug better. A workaround I found is that if I two-finger tap in the text field, I can get it to focus and bring up the keyboard. Obviously that isn't a complete fix as it's an unexpected gesture for folks who are used to how TalkBack works.

Exact same behavior for me. Any ideas?

[soumyajitz]

I am getting the same issue, can someone look into this bug or give us a workaround?

[Josh-Ng]

Just stumbled across this while doing something unrelated. But on the native side, if you set the onClickListener of the TextInputEditText to dispatch a tap or open the drawer it will behave how you want.

[The-Speck]

So this may or may not be related to your issue but I encountered a problem where I had to multi-tap TextInput components to become focused and keyboard intermittently opened. I found out that the issue was being in debug mode.

When they said it impedes performance, they weren't kidding. It seems like the performance hindered the ability to properly register taps.

For reference:

Galaxy S8
expo 38.0.8

[sethkane]

@PeoB I created a POC and tested the Input fields with Talkback enabled and I don't see any issues in React Native 0.63. I have done the same POC with React Native 0.59 and it is an issue as you and the rest of the group have stated.

[dishantwalia]

This issue has been fixed with this PR on latest RN version. https://github.com/facebook/react-native/pull/24359/commits/f733da55c212f61ca31b9664d95536600bf73b91 Pull Request : https://github.com/facebook/react-native/pull/24359 https://github.com/facebook/react-native/pull/25274

Additionally for the current fix in older RN version We can add a same OnClick capabilities on TextInput by creating Custom React Element with Touchable view that inherit TextInput element with clickable props that focus the keyboard after onClick.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[0xC0A1]

The issue has not been fixed.

[Bertlk]

I am getting the same issue.

[GuilhermePortella]

The issue has not been fixed. I am going through this now.

[shivenmian]

@fabriziobertoglio1987 any update on this issue?

[fabOnReact]

@shivenmian PR https://github.com/facebook/react-native/pull/33468#issue-1177588267 includes extensive video tests of this functionality. I did not detect any issues, but I will do more tests in a couple of days. Thanks

https://drive.google.com/file/d/1kAHHrYKXP6tRFf7w1_rcxOFp3cCa2L_C/view

[fabOnReact]

Main Branch https://github.com/facebook/react-native/issues/24519#issuecomment-618074608 https://github.com/facebook/react-native/issues/24519#issuecomment-582581336

https://user-images.githubusercontent.com/24992535/215108449-9eafe3cd-8737-43cc-a06b-e76e76565d7b.mp4

Related https://github.com/fabriziobertoglio1987/react-native/commit/6c4224ea9b5f819fc0b6fef3b948a23b9a69fe42

[fabOnReact]

@GuilhermePortella @Bertlk @kevinrodriguez-io I could not reproduce this issue using the latest version of react-native. Could you test again and give us some feedback? Thanks

My test on the latest release of react-native

https://user-images.githubusercontent.com/24992535/215114346-b7f0e96a-67fb-4c7f-bf4a-7d5cf8b48d85.mp4

[GuilhermePortella]

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

[fabOnReact]

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. 🙏