Problems with replacing non-empty selection in IE11

[cmlenz]

We have been fighting with a couple of rather subtle IE bugs with our editor when updating to the latest versions of prosemirror-view (we’re still stuck on 0.8.9). One of them I just found is easily reproducible on the basic example on prosemirror.net so I figured I’d post a quick notice here.

To reproduce:

1. Visit https://prosemirror.net using IE11
2. Double click the first word (Like) to select it
3. Type a character, say “a”

Rather than replacing the “Like” (or "Like ") with an “a” and putting the caret after the inserted letter, the selection is deleted and the typed content is appended at the bottom of the content. See the screenshot showing the before (left) and after (right).

The actual issue I was tracking down was that the selection was being reported as empty in a custom input rule we have, maybe that’s related?

[dongjink81]

I think this is related. Here is my issue.

In IE11. The node is moving to automatically to the bottom of last content

Continuing the discussion from Problems with replacing non-empty selection in IE11: I found this issue today. So I came to this forum. and found cmlenz’s issue. I think this is related each other. In IE 11. The First character in Korean is always making blue selection block in PM. [image] It must be typed to The First position without any blank on any lines. Then we type second character to combine. After that. The node is suddenly moved to bottom of The last paragraph. In korean. We must…

[pet]

I think this is happening on any inner-left or outter-right deletions. I was struggling with this while trying to workaround Backspaces issues in IE11 but it seems to be related to selectionchange event fires before input. I solved this like this:

this.onCharData = e => {
	if (browser.ie && browser.ie_version <= 11) { 
		// probably useless condition because: const useCharData = browser.ie && browser.ie_version <= 11
    	this.disconnectSelection()
    }
	this.queue.push({target: e.target, type: "characterData", oldValue: e.prevValue})
	window.setTimeout(() => this.flush(), 20)
}

It works also if I remove suppressSelectionUpdates() for IE readDOMChange deletes.

Let me know if this works for you.

P.

[pet]

UPDATE: I tried this in IE on Windows instead VM and proposed solution doesn’t work. However, when I adjusted also MutationObserver callback it fixed the issue for me:

constructor(view, handleDOMChange) {
  this.view = view
  this.handleDOMChange = handleDOMChange
  this.observer = window.MutationObserver &&
    new window.MutationObserver(mutations => {      
      if (browser.ie && browser.ie_version <= 11)
        // IE Fix
        this.disconnectSelection();
        setTimeout(() => this.flush(mutations), 10)
      else
        this.flush(mutations)
    })
  this.currentSelection = new SelectionState
  this.queue = []
  if (useCharData) {
    this.onCharData = e => {
      // IE Fix
      this.disconnectSelection();
      // BAU
      this.queue.push({target: e.target, type: "characterData", oldValue: e.prevValue})
      window.setTimeout(() => this.flush(), 20)
    }
  }
  this.onSelectionChange = this.onSelectionChange.bind(this)
  this.suppressingSelectionUpdates = false
}

Probably this is still not definitive answer but at least I have temporary solution.

P.

[marijn]

The problem was (again) the strange timing of mutation and selection events when you delete or overwrite something in IE11. I’ve pushed some patches that try to make the handling of this more robust, and released prosemirror-view 1.10.2 with the fixes.

[dongjink81]

I tested 1.10.2. It looks fix above issue. But Unfortunately I found other problems about selection on IE11.

I’m so sorry about report other issue.

Do type ‘dkdkdk’. Then press Enter.

The ‘dkdkdk’ is ‘아아아’ in Korean. These are composited by Vowel consonant. And It be considered the one character in logically.

And It makes default blue selection on IE11 always when it comes as the first character on paragraph without any blank. (If It has any blank before type. It looks fine. I couldn’t find any issues in this condition.)

Anyway, In That condition, The IE11 looks broken.

The “dkdkdk” (stated in blue selection) is deleted when press enter.

And Any Vowel consonant words In korean can’t type anymore. It looks like the cursor didn’t move to next character.

I also found that this IE11 issue in Korean didn’t comes out in prosemirror-state, version 1.8.0. I tested about 5~7 more versions between 1.9~1.10. and finally found it.

See this GIF.

[marijn]

@dongjink81 Is that the same issue you describe in this post?

[dongjink81]

@marijn Yes. And It also didn’t comes out in prosemirror-state v1.8.0. ( I mean it’s fine. It looks no bug on that. But I’m not sure what other side effect may come out.) (And I couldn’t test on every version from 1.8.0 to 1.10.2. Sorry. I just found 1.8.0 is stable only on my issue.)