Tap To Select Not Working (on iPhone)

[eric-lobdell]

http://www.lobdell.me/emoji-gram
-- Test from mobile safari / mobile chrome. The button doesn't actually make a selection of the text.

1. open /ohno3/ on mobile web browser
2. type "test"
3. press [select text] button
4. nothing happens.

[eric-lobdell]

I found that if you:

1. press and hold the button until the button text is selected
2. then tap an area of the button that is not selected
3. somehow output text is then selected

[amitava82]

It works on Android Chrome. But why do you have the button say press n hold? Tapping the button selects all text and places on clipboard(in chrome). Earlier labels were more meaningful. Perhaps for safari it should not say 'Copied'

[eric-lobdell]

Ah, I have it say that because on iPhone Safari and iPhone chrome the button won't actually do anything when you tap. I found that if you press and hold (above comment), it'll allow you to select all of it.

Do you have access to an iOS device to test on?

[amitava82]

Nope. On Android if you press and hold the button, it will select button text. Does not tapping on the select button select the emoji code? It should. Selection is supported in safari. Ideally it should say Select and on device that supports clipboard it should copy and button changed to Copied. Otherwise, it should not say Copied.

[eric-lobdell]

No when you tap the button, nothing happens. That's why I changed the button text.

The press and hold has the same effect on mobile safari, but once you tap to deselect the button text, it somehow magically selects the emoji text. So it's a "hack" until we can resolve why a single tap on the button isn't selecting the text.

I'll do a screen record so you can see.

[eric-lobdell]

Check it out https://www.dropbox.com/s/2bdvnpynd56nzrm/issue2.mov?dl=0

You can see, I tap the button (it changes text every tap) multiple times before I press and hold it. Once I press and hold, it behaves just like you android, but then one more tap, and somehow all the text is selected.

Is there anything I can do to help troubleshoot?

[amitava82]

Tap to select needs to be fixed.

[eric-lobdell]

I just packaged the latest: http://lobdell.me/emoji-gram/

iPhone still doesn't want to select the text 🤔 However it looks like the Safari / iMessage react issue is totally resolved!! That's awsome!!

I ran: "npm run build" then copied the files to my server after linking the css file. Is it possible something is getting messed up in the packaging process?

[amitava82]

OK, I found mobile safari don't support the API used for text selection. I tried using a textarea (so that we can select text) but then there is this weird , comes before newline. I'll have to play around bit more.

[eric-lobdell]

Would this be a simple way to fix this?

http://stackoverflow.com/questions/1899421/selecting-text-in-mobile-safari-on-iphone

Not just the first answer, but a couple people down the thread seem to have fixes working for them. Just poking around.

[amitava82]

Need an iphone to test :(

[eric-lobdell]

Dang. I tried to plugin my iPhone and use the developer console for a debug, but no errors / warnings appeared. So, no help 👎

Anyhow, I took to the internet again: http://stackoverflow.com/questions/38233871/auto-select-text-range-in-mobile-safari-ios-9-reactjs -- maybe someone can help us!

[amitava82]

Hmm, only workaround is using a textarea but I'm not sure where that , comes from after every new line. I'll have to take another look.

[eric-lobdell]

It looks like the latest bugfix only brings up the keyboard when you press the button. It's acting like the text area is being focused instead of selecting everything.

www.lobdell.me/emoji-gram -- is the latest master + bugfix.

[eric-lobdell]

I recorded the new behavior (each time the keyboard moves up, it's a tap on the button) here:

[eric-lobdell]

Resolved with:
this.selectionStart=0; this.selectionEnd=this.ele.length;