React-native-web: Keyboard.dismiss prevents textinput on web

[Tobbe]

The problem

Wrapping a TextInput in <TouchableWithoutFeedback onPress={Keyboard.dismiss}> prevents text input in web browsers. It works in the Android emulator.

How to reproduce

Simplified test case: https://snack.expo.io/zZnI!80Pv
Even more minimal: https://snack.expo.io/wGzixvj1e

Steps to reproduce:

1. Choose the web view
2. Click on the TextInput field
3. Try to type any text using the computer keyboard

Expected behavior

I expect the text I enter to show up in the TextInput field.

Environment (include versions). Did this work in previous versions?

• React Native for Web (version): Whatever Snack uses
• React (version): Whatever Snack uses
• Browser: Chrome

[Tobbe]

Just realized this is a side effect of this issue: https://github.com/necolas/react-native-web/issues/1583
Here's a snack to verify my assumption: https://snack.expo.io/6Dn1gdys0 clicking on the text input to give it focus triggers the alert.

[necolas]

This is also fixed in react-native-web@canary

[necolas]

We'll keep this open until the patches land in master

[danieloi]

Still seeing the issue in version 0.15.0

[danieloi]

It doesn't work with reanimated 1.
https://docs.swmansion.com/react-native-reanimated/docs/web-support/

[jmarcosmruk]

I adeed a check before Keyboard.dismiss()

function dismissKeyboard() { if (Platform.OS != "web"){ Keyboard.dismiss(); } }

<TouchableWithoutFeedback style={{ alignContent: "center" }} onPress={() => dismissKeyboard()}>

it worked for me

[xpsdeset]

I adeed a check before Keyboard.dismiss()

function dismissKeyboard() { if (Platform.OS != "web"){ Keyboard.dismiss(); } }

<TouchableWithoutFeedback style={{ alignContent: "center" }} onPress={() => dismissKeyboard()}>

it worked for me

You sir are a lifesaver.