Slate: Uncaught DOMException: Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index.

[dmitrizzle]

Bug report/question

It's a bug, or I might have made an error in my implementation during upgrade to [email protected] and [email protected]

Tested on Chrome 61 macOS 10.12.6 with React16.

Current behaviour:

In my implementation everything works fine in the editor (I'm ignoring depreciation warnings for now) until I add an image to the document.

This is the code snippet that handles inserting images (done when clicking on one of the images in the grid) to the document:

handleImageSuggestion = src => {
    const { state, editor, node } = this.props
    const resolvedState = state
      .change()
      .insertBlock({
        type: "image",
        isVoid: true,
        data: { src }
      })
      // remove docket
      .state.change()
      .removeNodeByKey(node.key)
    this.suggestionHandlerTimeout = setTimeout(() => {
      editor.onChange(resolvedState)
    }, 10)
  }

Error stack printout:

content.js:167 Uncaught DOMException: Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index.
    at Content._this.updateSelection (http://localhost:3000/static/js/12.chunk.js:21531:28)
    at Content._this.componentDidUpdate (http://localhost:3000/static/js/12.chunk.js:21504:13)
    at commitLifeCycles (http://localhost:3000/static/js/bundle.js:27565:24)
    at commitAllLifeCycles (http://localhost:3000/static/js/bundle.js:28342:9)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:17347:14)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:17386:16)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:17243:27)
    at commitAllWork (http://localhost:3000/static/js/bundle.js:28463:9)
    at workLoop (http://localhost:3000/static/js/bundle.js:28735:13)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:17347:14)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:17386:16)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:17243:27)
    at performWork (http://localhost:3000/static/js/bundle.js:28848:7)
    at batchedUpdates (http://localhost:3000/static/js/bundle.js:29292:9)
    at performFiberBatchedUpdates (http://localhost:3000/static/js/bundle.js:17694:10)
    at stackBatchedUpdates (http://localhost:3000/static/js/bundle.js:17685:10)
    at batchedUpdates (http://localhost:3000/static/js/bundle.js:17699:10)
    at Object.batchedUpdatesWithControlledComponents [as batchedUpdates] (http://localhost:3000/static/js/bundle.js:17712:12)
    at dispatchEvent (http://localhost:3000/static/js/bundle.js:17922:30)
Content._this.updateSelection @ content.js:167
Content._this.componentDidUpdate @ content.js:140
commitLifeCycles @ react-dom.development.js:11517
commitAllLifeCycles @ react-dom.development.js:12294
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
commitAllWork @ react-dom.development.js:12415
workLoop @ react-dom.development.js:12687
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
performWork @ react-dom.development.js:12800
batchedUpdates @ react-dom.development.js:13244
performFiberBatchedUpdates @ react-dom.development.js:1646
stackBatchedUpdates @ react-dom.development.js:1637
batchedUpdates @ react-dom.development.js:1651
batchedUpdatesWithControlledComponents @ react-dom.development.js:1664
dispatchEvent @ react-dom.development.js:1874
proxyConsole.js:54 The above error occurred in the <Content> component:
    in Content (created by Editor)
    in Editor (at index.js:95)
    in div (at index.js:90)
    in _class (at index.js:25)
    in section (created by styled.section)
    in styled.section (at index.js:24)
    in div (at index.js:18)
    in Unknown (at Composer.js:38)
    in article (created by styled.article)
    in styled.article (at Composer.js:31)
    in Unknown (created by LoadableComponent)
    in LoadableComponent (created by Route)
    in Route (at AppRoutesSubmit.js:30)
    in Switch (at AppRoutesSubmit.js:28)
    in Unknown (created by LoadableComponent)
    in LoadableComponent (created by Route)
    in Route (at AppRoutes.js:87)
    in Switch (at AppRoutes.js:59)
    in main (at AppRoutes.js:58)
    in Unknown (at index.js:130)
    in div (at index.js:128)
    in App (created by Connect(App))
    in Connect(App) (created by Route)
    in Route (created by withRouter(Connect(App)))
    in withRouter(Connect(App)) (at index.js:32)
    in div (created by styled.div)
    in styled.div (at index.js:22)
    in ThemeProvider (at index.js:21)
    in Unknown (at index.js:27)
    in Router (created by BrowserRouter)
    in BrowserRouter (at index.js:26)
    in Provider (at index.js:25)

Consider adding an error boundary to your tree to customize error handling behavior.
You can learn more about error boundaries at https://fb.me/react-error-boundaries.

[davidspiess]

I'm getting the same error message after upgrade.

[doodlewind]

How about patching #1238 as a fallback?

[alanchrt]

Same. Happens on editor.focus() in some occasions on my app.

[CodePlayer]

@ianstormtaylor Unfortunately, I'm still getting the same issue.
My version info is [email protected] and [email protected]

The operation records as shown below:

The core code of this component is as follows:

render() {
    return (
        <pre className="code-block">
            <div className="code-block-panel" contentEditable={false}>
                <input ref="codeAlias" type="text" placeholder="请输入代码片段名称..." />
                <select ref="codeLanguage">
                    <option value="">==选择语言==</option>
                    <option value="css">CSS</option>
                    <option value="js">JavaScript</option>
                    <option value="html">HTML</option>
                </select>
            </div>
            <code {...this.props.attributes}>{this.props.children}</code>
        </pre>
    );
}

The error detail is as follows:

slate-react.es.js:3392 Uncaught DOMException: Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index.
at Content._this.updateSelection (http://localhost:3000/static/js/0.chunk.js:71966:46)
at Content.componentDidUpdate (http://localhost:3000/static/js/0.chunk.js:72148:12)
at commitLifeCycles (http://localhost:3000/static/js/0.chunk.js:49702:26)
at commitAllLifeCycles (http://localhost:3000/static/js/0.chunk.js:51201:11)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/0.chunk.js:32836:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/0.chunk.js:32885:20)
at invokeGuardedCallback (http://localhost:3000/static/js/0.chunk.js:32939:35)
at commitRoot (http://localhost:3000/static/js/0.chunk.js:51406:11)
at completeRoot (http://localhost:3000/static/js/0.chunk.js:52936:7)
at performWorkOnRoot (http://localhost:3000/static/js/0.chunk.js:52859:13)
at performWork (http://localhost:3000/static/js/0.chunk.js:52764:11)
at performSyncWork (http://localhost:3000/static/js/0.chunk.js:52738:7)
at requestWork (http://localhost:3000/static/js/0.chunk.js:52593:9)
at scheduleWork (http://localhost:3000/static/js/0.chunk.js:52400:9)
at Object.enqueueSetState (http://localhost:3000/static/js/0.chunk.js:45625:9)
at App.push../node_modules/react/cjs/react.development.js.Component.setState (http://localhost:3000/static/js/0.chunk.js:61943:20)
at App._this.onChange (http://localhost:3000/static/js/main.chunk.js:546:13)
at Editor$$1.handleChange (http://localhost:3000/static/js/0.chunk.js:72638:7)
at Editor.onChange (http://localhost:3000/static/js/0.chunk.js:72502:17)
at Editor.flush (http://localhost:3000/static/js/0.chunk.js:83654:12)
at http://localhost:3000/static/js/0.chunk.js:83629:24
index.js:1446 The above error occurred in the component:
in Content (created by Editor$$1)
in Editor$$1 (at App.js:514)
in div (at App.js:512)
in App (at src/index.js:23)

React will try to recreate this component tree from scratch using the error boundary you provided, App.
function.console.(anonymous function) @ index.js:1446
index.js:1446 出错啦： DOMException: Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index.
at Content._this.updateSelection (http://localhost:3000/static/js/0.chunk.js:71966:46)
at Content.componentDidUpdate (http://localhost:3000/static/js/0.chunk.js:72148:12)
at commitLifeCycles (http://localhost:3000/static/js/0.chunk.js:49702:26)
at commitAllLifeCycles (http://localhost:3000/static/js/0.chunk.js:51201:11)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/0.chunk.js:32836:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/0.chunk.js:32885:20)
at invokeGuardedCallback (http://localhost:3000/static/js/0.chunk.js:32939:35)
at commitRoot (http://localhost:3000/static/js/0.chunk.js:51406:11)
at completeRoot (http://localhost:3000/static/js/0.chunk.js:52936:7)
at performWorkOnRoot (http://localhost:3000/static/js/0.chunk.js:52859:13)
at performWork (http://localhost:3000/static/js/0.chunk.js:52764:11)
at performSyncWork (http://localhost:3000/static/js/0.chunk.js:52738:7)
at requestWork (http://localhost:3000/static/js/0.chunk.js:52593:9)
at scheduleWork (http://localhost:3000/static/js/0.chunk.js:52400:9)
at Object.enqueueSetState (http://localhost:3000/static/js/0.chunk.js:45625:9)
at App.push../node_modules/react/cjs/react.development.js.Component.setState (http://localhost:3000/static/js/0.chunk.js:61943:20)
at App._this.onChange (http://localhost:3000/static/js/main.chunk.js:546:13)
at Editor$$1.handleChange (http://localhost:3000/static/js/0.chunk.js:72638:7)
at Editor.onChange (http://localhost:3000/static/js/0.chunk.js:72502:17)
at Editor.flush (http://localhost:3000/static/js/0.chunk.js:83654:12)
at http://localhost:3000/static/js/0.chunk.js:83629:24 Object
function.console.(anonymous function) @ index.js:1446

This problem only appears in the chrome browser (in detail, Chrome 71.0.3578.98 64bit on Win7 64bit), there is no problem with the Firefox browser.

[CodePlayer]

@dmitrizzle I hope that you can reopen this issue. Many thanks!

[tommoor]

Yes, same issue here on latest Slate (44.9) – seems as though it returned.

I can reliably reproduce by blurring and focusing an empty editor

[alanchrt]

As someone who reported this when it came up in 2017, I'm on latest (44.9) and can't repro by focusing and blurring empty editor. Any way someone could distill it down to a simple jsfiddle that reproduces it?

Here's a starting point-- https://jsfiddle.net/fj9dvhom/1/

I have noticed after the focus overhaul a while ago, there has been some finicky behavior around onFocus and onBlur handlers, especially if you change state in a way that re-renders the editor. I actually gave up on using them altogether in favor of just looking at the isFocused state of the value.

[tommoor]

In my case I figured it out and was able to work around it – It's a strange one, you can reproduce by:

• Go to fiddle: https://jsfiddle.net/zdotuxey/8/
• Click on the grey area to focus the editor above – everything works fine.
• Open inspector and apply float: left to the placeholder style.
• Now try and focus the editor by clicking on the grey box again, the error will throw.

(Floating the placeholder actually makes it align better in a number of scenarios)

[brendancarney]

I'm seeing this in my editor currently. It appears to happen when this block is executed: https://github.com/ianstormtaylor/slate/blob/master/packages/slate-react/src/components/content.js#L193-L196, and then throws here: https://github.com/ianstormtaylor/slate/blob/master/packages/slate-react/src/components/content.js#L200.

I can recreate it consistently and am working on a fix.

[brendancarney]

Also, mine is only happening when the first element has a placeholder. It looks like calling focus() on the editor element causes issues when the first element is unfocusable (the placeholder). I'm hacking around it right now by putting a hidden focusable element above it. I'll run with this for a few days and see if it works ok.

[emraa]

Our team member managed to solve a similar issue (for us) with fix in this PR: https://github.com/ianstormtaylor/slate/pull/2920

Does this help others with their issues?

If possible, would maintainers have a time to review it?