All browsers: Add ability to cancel character composition (IME) at the very beginning

[michael]

composition-events-leak.mov

Why is this a problem?

• My editor (and possible a lot of other editors/apps) have no way to prevent unintended DOM changes when the user presses a dead key when a contenteditable has a focus
• Particularly in reactive frameworks this is a problem, because React/Svelte and co, assume that all state changes happen on the component source data, and then propagate to the DOM, instead of the DOM being manipulated directly (without the framework noticing)

I don't see a reason why you shouldn't be able to cancel all inputs onbeforeinput, even those that would start a character composition workflow?

Could Blink/Webkit/Gecko & others change this behavior?

[michael]

I just discovered a case where this issue breaks my entire app. Editor blows up, because we structurally destroyed the document, and Svelte can not recover the state.

blablabla.mov

[michael]

Found a solution how you can actually cancel IMEs.

  function oncompositionstart(event) {
    // eg. when multiple nodes are selected, or inside a cursor trap
    if (doc.selection.type !== 'text') {
      const dom_selection = window.getSelection();
      dom_selection.removeAllRanges();
    } else {
      // handle the IME, when you have text cursor/selection.
    }
  }

While this workaround works, I still wonder if there would be any negative consequences if browsers allowed cancelling composition events at the very beginning (not in the middle of it).

It would be a cleaner API in my opinion, but maybe I'm overlooking something?