Android autocorrect flickers and does not provide the right suggestions

[churichard]

Description
When typing on Android, the autocorrect suggestions flicker and constantly get switched out with other buttons on the toolbar (e.g. gif button, sticker button, etc.).

Also, the autocorrect suggestions that are provided are not the ones that would be provided in a native input. You can test this by typing in something, observing the suggestions, and then typing the same thing in the address bar. You can also see this at the very end of the recording, where I type in "worjs" and you don't get the "works" autocorrect suggestion in the toolbar. Not sure why this happens, but it could be because the context is being lost somehow.

Recording
https://user-images.githubusercontent.com/4218237/133834141-b1d022dd-7fb5-41ad-8bfe-50fe04737553.mp4

Sandbox
Reproducible anywhere, but I was using https://www.slatejs.org/examples/markdown-shortcuts

Steps
To reproduce the behavior:

1. Go to https://www.slatejs.org/examples/markdown-shortcuts
2. Start typing
3. Observe that the autocorrect suggestions flicker
4. Start typing a word (like "there")
5. Observe that the autocorrect suggestions do not make sense

Expectation
The autocorrect suggestions should not flicker, and the autocorrect suggestions should be the same as if typing in a regular contenteditable or text box.

Environment

• Slate Version: 0.66.1
• Operating System: Android 11 (Pixel 3XL)
• Browser: Chrome

[BitPhinix]

A quick and dirty way to solve this is to patch react-dom to not set the textContent if the current value equals what it'll be set to:

In https://github.com/facebook/react/blob/ed00d2c3d8e39c214bb749dc8a520a4a695c19fd/packages/react-dom/src/client/ReactDOMHostConfig.js#L461

update

export function commitTextUpdate(
  textInstance: TextInstance,
  oldText: string,
  newText: string,
): void {
  textInstance.nodeValue = newText;
}

to

export function commitTextUpdate(
  textInstance: TextInstance,
  oldText: string,
  newText: string,
): void {
  if (textInstance.nodeValue !== newText) {
    textInstance.nodeValue = newText;
  }
}