The editor can't be focused or the selection can't be correctly updated after input with IME
See original GitHub issueDo you want to request a feature or report a bug?
report a bug
What’s the current behavior?
During our daily use of Slate, we occasionally encounter a problem that the editor can’t be focus or the selection can’t be updated after inputting characters with IME. The problem can be easily reproduced with the Input Tester on the demo site (maybe it is due to the “Input Tester” update the rendered react components for every event to show the event list). Here is the screenshot:
Whenever I want to put the focus after the last character “f”, it changes back to before “f”.
Currently I think the problem is caused by the following code:
content.js:
onEvent() {
...
if (handler == 'onSelect') {
const { editor } = this.props
const { value } = editor
const { selection } = value
const window = getWindow(event.target)
const native = window.getSelection()
const range = findRange(native, value)
if (range && range.equals(selection.toRange())) {
this.updateSelection()
return
}
}
...
}
Currently I’m trying to locate and resolve the problem. Any hints are welcome.
Issue Analytics
- State:
- Created 5 years ago
- Comments:9 (2 by maintainers)
Top Results From Across the Web
In React ES6, why does the input field lose focus after typing a ...
I was using a key from a text field. Inside the same block; I had an input field to update the value of...
Read more >KB4564002: You might have issues on Windows 10, version ...
Issue 1 - Resolved: ... Some apps utilize the ImeMode property to control the IME (Input Method Editor) mode for individual text entry...
Read more >Control focus with tabindex - web.dev
If you don't see a focus indicator at all, it may be hidden by your CSS. Check for any styles that mention :focus...
Read more >Handle input method visibility | Android Developers
Although Android gives focus to the first text field in your layout when the activity starts, it doesn't show the input method. This...
Read more ><input>: The Input (Form Input) element - HTML
Since every <input> element, regardless of type, is based on the ... label of the form control receiving focus, the screen reader will...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Here is my analysis of the problem (Chrome 68.0.3440.106 under Mac):
During IME composition, after I input three characters “fff”:
the onSelection event is fired to the editor. In
onEvent()
, the native selection will take the character “fff” into consideration. So the offset is not 0 (should be a value after the characters “fff”). But the characters are not saved to slate document yet, so therange = findRange(native, value)
will return a range with with offset 0.range.equals(selection.toRange()
will be true, andthis.updateSelection()
is called.In the screenshot, the selection means “native selection”, the offset is 5. The Range is of offset 0.
After changing the code to as following, IME can work in the “Input Tester” example:
In
before.js
, during IME composing, DOM selection event will not be handled:So I think during IME composing, the selection event should not be handled in
content.js
too.@ianstormtaylor I’m having very similar issues with a plugin I’m writing, but it doesn’t involve IME.
The text I’m trying to select is in div with
contentEditable={false}
. I tried catching events and preventing their propagation but nothing seems to work. I’ve tried hijacking onClick, onMouseUp, onSelect, everything I could think of without success.Do you have any idea? Do you think it’s related?