Deletion bug in Firefox causes error/crash

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

[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 !