The editor can't be focused or the selection can't be correctly updated after input with IME

Do 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.

[freeplant]

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 the range = findRange(native, value) will return a range with with offset 0. range.equals(selection.toRange() will be true, and this.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:

    if (handler == 'onSelect') {
      const { editor } = this.props
      if (!editor.state.isComposing) {
        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
        }
      }
    }

In before.js, during IME composing, DOM selection event will not be handled:

  function onSelect(event, change, editor) {
    if (isCopying) return true
    if (isComposing) return true

So I think during IME composing, the selection event should not be handled in content.js too.

[ArnaudRinquin]

@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?