Really strange bug when React takes a long time to update DOM.

Do you want to request a feature or report a bug?

Bug

What’s the current behavior?

First things first, this React app is very complex. It has a complex form that is connected to Redux and when the user changes a form field, a lot of other elements on the page update as well (think of an online page builder with live preview) … so the app is a bit laggy … plus, this is in development mode (CRA) with React and Redux Dev Tools enabled, making things lag even more. The production build is much more performant, but I have not tried to recreate this bug in a production build.

I am using Slate like a controlled component.

Adding or deleting characters is working fine, but when I attempt to insert a new line into the editor, I am encountering a really strange bug. It looks like the internal State updates, but when Slate tries to reconcile the internal state with that of the DOM, and the DOM hasn’t updated due to low performance/lag, Slate encounters the error Cannot find a descendant at path [x,y] in node: { ... }. Anyway, this is just speculation on my part.

I was able to reproduce the error in Codesandbox by wrapping the Redux dispatch in a setTimeout to simulate a laggy app.

Codesandbox: https://codesandbox.io/s/vigorous-leftpad-6q3xv

Stack trace:

Uncaught Error: Cannot find a descendant at path [1,0] in node: {"children":[{"type":"paragraph","children":[{"text":"This is editable plain text, just like a <textarea>!"}]}],"operations":[{"type":"split_node","path":[0,0],"position":13,"target":null,"properties":{}},{"type":"split_node","path":[0],"position":1,"target":13,"properties":{"type":"paragraph"}}],"selection":{"anchor":{"path":[1,0],"offset":0},"focus":{"path":[1,0],"offset":0}},"marks":null}
    at Object.get (VM464 index.js:6199)
    at Object.node (VM464 index.js:2751)
    at Object.toDOMPoint (VM468 index.js:1616)
    at Object.toDOMRange (VM468 index.js:1675)

Slate: 0.55.2 (also 0.53.0) Slate React: 0.55.3 (also (0.53.0) Browser: Chrome (maybe others) OS: Mac (maybe others)

What’s the expected behavior?

Inserting a new line in a laggy app should not break the editor.

This seems to be a really weird problem even though Redux is synchronous. The solution seems very complex, involving some kind of wait mechanism to ensure that DOM has been updated. I would love to submit a PR provided I receive some direction on potential solutions.

[ebasic]

Maybe this would work…add this code in your Slate editor component (root component that accepts editor value):

  useEffect(() => {
    if (!value) {
       Transforms.deselect(editor);
       // or set selection to neutral state:
       // editor.selection = { anchor: { path: [0,0], offset:0 }, focus: { path: [0,0], offset: 0 } }
    }
  }, [value]);

Value state and selection state are controlled separately, so when value resets, selection should be reset too. This error usually occurs when slate value resets, and selection remains the same (so blank value holds on the current selection state but there’s nothing to retrieve at that selection). So on value reset, selection should be reset too. I tried Transforms.deselect(editor) but also found suggestion editor.selection = { anchor: { path: [0,0], offset:0 }, focus: { path: [0,0], offset: 0 } } somewhere, so I added it as comment in a code snippet above.

[nnurmano]

I reverted to 0.57.1, unfortunately, the issue is still there. I can’t share the code, but redux is being used.