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:

react-native-dom/packages/react-native-dom/Libraries/Components/TextInput/TextInput.dom.js

Line 849 in 88fe69f

_onFocus: function(event: Event) {

---

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.

react-native-dom/packages/react-native-dom/Libraries/Components/TextInput/TextInput.dom.js

Line 567 in 88fe69f

this.requestAnimationFrame(this.focus);

[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 ***@***.***> 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 <#37 (comment)>, 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:

react-native-dom/packages/react-native-dom/ReactDom/views/Text/RCTTextInput.js

Line 41 in 313b00e

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

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",