facebook / react

The library for web and native user interfaces.
https://react.dev
MIT License
228.06k stars 46.53k forks source link

Textarea loses focus after inserting paired punctuation with Chinese IME #14213

Open ghost opened 5 years ago

ghost commented 5 years ago

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

What is the current behavior? Textarea lose focus after insert paired punctuation by "Chinese-Pinyin 10 key" input source on IOS safari. And then textarea can't be focused when I click it. But after other element has been focused, the textarea could be focused again.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

CodeSandbox Demo

steps(youtube video)

What is the expected behavior? just work fine!

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? versions of React: 16+ OS: IOS browser: safari

kulek1 commented 5 years ago

I think it's an issue with Webkit/Safari on iOS rather than React. I've tested it and from what I can see plain html input behaves the same as above.

In native apps on iOS after selecting Chinese quotes the cursor goes between those chars automatically so I'd recommend to address this issue here

ghost commented 5 years ago

I think it's an issue with Webkit/Safari on iOS rather than React. I've tested it and from what I can see plain html input behaves the same as above.

In native apps on iOS after selecting Chinese quotes the cursor goes between those chars automatically so I'd recommend to address this issue here

Thanks for test, I've added a plain html element to the demo above. You're right, it must be an issue with Webkit/Safari on iOS.