Deletion bug in Firefox causes error/crash

[tomkelsey]

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

bug

What is the current behavior?

I can only recreate this issue in Firefox which seems to be the only browser with a "Delete" option in the context menu.

https://jsfiddle.net/wa2ckjq4/8/

Highlight the five rows saying "Delete me". Right click and choose "Delete" from the context menu.

Whole page crashes with console logs:

DOMException: "Node was not found" react-dom.production.min.js:110:57
NotFoundError: Node was not found

I may be mistaken but it appears to relate to setting an initial value in the constructor. Without that, I haven't been able to reproduce this issue.

What is the expected behavior?

For the page not to crash

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?

Firefox 61.0.1 (64 bit)
Draft v0.10.5
React v16.4.1

[thibaudcolas]

This is also reproducible without setting an initial value, although it won't always flat-out crash. All you need to do is select at least 2 different blocks, then use the delete menu item. If it doesn't crash, focus and typing will at least be mis-handled and insert characters in the wrong location / fail to move the caret.

From my testing, the browser removes part of the DOM from the contenteditable managed by Draft.js, probably in a way that Draft.js doesn't handle. I believe this is similar to #1454. I'm not sure how this "Delete" menu item works (might be the delete command?), and whether there is a way to "handle" it. If not, it might be possible to watch for the DOM mutations and act accordingly.

[aanchalgera]

Any ways to fix it?

[bytenik]

I'm experiencing this bug now. This has been around for over 1.5 yrs at this point. Is Firefox not a priority?

[MattSchiller]

I can confirm that my team is experiencing this same issue and it's causing severe breakings for our Firefox experience. Bump.

[mrkev]

@bytenik @MattSchiller what versions of Draft.js are you using?

[MattSchiller]

@mrkev draft-js@^0.11.1:

[MattSchiller]

Following up here for the Draft team & future bug-sufferers.

Recapping the issue:

• We had a stateful component that leveraged the editorState to handle user input. When the user submitted a form, we wanted to clear the content. using EditorState.createEmpty/createWithContent worked fine to refresh this view in Chrome. In Firefox, it caused some problem internal to DJS which crashed the app around it.

Workaround/Acceptable solution:

• Simply leverage the following to replace the text in place, maintaining the editorState object and apparently side-stepping Firefox's bug:

EditorState.push(
  editorState,
  Modifier.replaceText(
    editorState.getCurrentContent(), 
    {{ SelectionState instance of entire editor text }},
    ''),
    'replace-text'
)
{{ forceSelecting the cursor to the start of the content }}

I hope this helps someone 🙇

[mrkev]

This is part of a whole set of errors that stem from the process of keeping React and the DOM in sync, when the DOM is edited under React's feet. Thanks for sharing the knowledge @MattSchiller !