React-native-web: Cannot type white space when <TextInput> is wrapped by <TouchableWithoutFeedback>

[cgav]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
With the focus in a TouchableWithoutFeedback wrapped TextInput component, when pressing the spacebar no white space character is being appended to the TextInput.

If the current behavior is a bug, please provide the steps to reproduce and
if a minimal demo of the problem via Glitch or similar (template:
https://glitch.com/edit/#!/react-native-web-playground).

Updated demo / source, thank you @lyahdav:
Demo: https://helpful-quality.glitch.me/
Source: https://glitch.com/edit/#!/helpful-quality?path=src/App/index.js:26:25

TextInput with 'hello' string doesn't accept white spaces. Check console.log.

What is the expected behavior?

TextInput accepts white spaces and appends / inserts it to / in the value.

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

• OS: macOS Sierra 10.12.6
• Device: MacBook Pro
• Browser: Google Chrome 60.0.3112.101 (Official Build) (64-bit)
• React Native for Web (version): 0.0.120
• React (version): 15.5.0

[lyahdav]

I'm not sure why you'd want a TextInput inside a TouchableWithoutFeedback component to being with. Also, I think your demo has a bug in it, because the TextInput isn't accepting any input. Here's a fixed demo still showing the bug with not accepting spaces:
Demo: https://helpful-quality.glitch.me/
Source: https://glitch.com/edit/#!/helpful-quality?path=src/App/index.js:26:25

[cgav]

@lyahdav Thank you for fixing the demo, I'll update the links.
I guess I can find a way around in my solution to make sure TouchableWithoutFeedback never nests a TextInput component, but it's quite a bit annoying, especially because it used to work in earlier versions.

[jaulz]

I would also be interested in a solution. Though I can focus a TextInput within a TouchableWithoutFeedback on a desktop it does not work on a mobile device.
@cgav Could you find any other work around instead of not wrapping the input?

Thanks!

[ThaJay]

@lyahdav

I'm not sure why you'd want a TextInput inside a TouchableWithoutFeedback component to being with.

a modal window that does not close when you click on it but does close when you click outside it. If it's a prompt for user input this will occur.
<TouchableOpacity style={modalStyle}> <View style={modalChildStyle}> <TouchableWithoutFeedback onPress={() => {}}> <View style={contentStyle}> <Header >{props.title}</Header> {props.children} </View> </TouchableWithoutFeedback> </View> </TouchableOpacity>