Really strange bug when React takes a long time to update DOM.
See original GitHub issueDo 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.
Issue Analytics
- State:
- Created 4 years ago
- Comments:8
Maybe this would work…add this code in your Slate editor component (root component that accepts editor
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 suggestioneditor.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.I reverted to 0.57.1, unfortunately, the issue is still there. I can’t share the code, but redux is being used.