TextInput support

[fbarrailla]

The TextInput component seems to be partially implemented. I can see that an input element is rendered but it's impossible to focus and edit it.

(btw, congrats for the impressive work!)

[peacechen]

I've observed that as well.

If I press tab a few times, it will transition the cursor to the TextInput.

[vincentriemer]

Yeah TextInput was implemented solely to the point of it being “rendered” so it didn’t throw any errors and looked alright in RNTester. I think that it might be the first component I work on after I sort through all my administrative tasks that have been piling up since the announcement.

[peacechen]

Stepped through the debugger and noticed that the _onFocus() callback is never fired when clicking on the TextInput: https://github.com/vincentriemer/react-native-dom/blob/88fe69fe9d8b9d62e0642e493877ce469cd7a608/packages/react-native-dom/Libraries/Components/TextInput/TextInput.dom.js#L849

---

This may not be related: For a TextInput with autoFocus={true}, the call to this.focus in componentDidMount seems to occur before it's rendered. https://github.com/vincentriemer/react-native-dom/blob/88fe69fe9d8b9d62e0642e493877ce469cd7a608/packages/react-native-dom/Libraries/Components/TextInput/TextInput.dom.js#L567

[thebetterjort]

Where are you on this? I can take a look at RCTInputAccessoryView, but not sure if you are doing admin tasks or TextInput ;)

[vincentriemer]

I’m currently working on admin tasks & the picker component. If anyone wants to tackle the TextInput component it’s up for grabs! On Tue, Jun 5, 2018 at 3:19 PM thebetterjort notifications@github.com wrote:

Where are you on this? I can take a look at RCTInputAccessoryView, but not sure if you are doing admin tasks or TextInput ;)

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/vincentriemer/react-native-dom/issues/37#issuecomment-394828761, or mute the thread https://github.com/notifications/unsubscribe-auth/ABVXG5x6UGPEdSKnIEfwIk8lyFq5Aljnks5t5tnGgaJpZM4UGTyl .

[thebetterjort]

Ya I looked at this. I don’t have any idea how to handle. Any tips?

[brandonros]

TextInput doesn't display and is broken in RNTester at the moment

[raspasov]

It looks like TextInput works on regular Safari/Chrome – onChange gets fired and you can read the input value.

However, on mobile Safari/Chrome it's not selectable – you can't tap the TextInput, no typing cursor/keyboard shows up.

I'm going to dig into why myself, any tips @vincentriemer ?

[brandonros]

@raspasov Can you confirm it's broken in RNTester as it stands?

[raspasov]

@brandonros it seems to be broken in RNTester, yes. But it seems to work when I tried it in my own project in a regular browser (but not mobile).

[raspasov]

Ok, I'm doing some digging:

@vincentriemer could the problem be coming from Shadow Dom?

Specifically, the latest Safari/Chrome for iOS list the support of Shadow Dom as "partial" and mentions bugs related to using "slotted" styling which I see is used here:

https://github.com/vincentriemer/react-native-dom/blob/313b00ead3083d88e1946ed282e2be338c0fcd55/packages/react-native-dom/ReactDom/views/Text/RCTTextInput.js#L41

Also located the issue in WebKit itself https://bugzilla.mozilla.org/show_bug.cgi?id=1205323 which seems to be actively worked on/fixed just a few days ago but I don't think the latest changes are in the current iOS 12.1.

Do you think TextInput workable functionality can be achieved without Shadow Dom? Let me know and I can give it a shot if you believe this might be the correct direction.

I'll keep this thread posted if I find something more.

[raspasov]

I can confirm that commenting out this line:

shadowRoot.appendChild(document.createElement("slot"));

... makes the TextInput selectable – the keyboard shows up in Mobile Safari and I can type in the TextInput field. That's good news! :)

I haven't fully tested all functionality but at least onChangeText seems to be firing and I can get the latest value of the TextInput.

[shatodj]

TextIput is selectable and it is possible to write the text inside, but some properties are not working eg. secureTextEntry, defaultValue nor placeholder.

"react": "16.5.1",
"react-native": "^0.57.8",
"react-native-dom": "^0.5.0",