Draft-js: This Selection object doesn't have any Ranges

[mshibl]

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

What is the current behavior?
When adding a custom component via AtomicBlockUtils.insertAtomicBlock and then clicking on it, the following error is logged to the console:

Uncaught DOMException: Failed to execute 'extend' on 'Selection']
    at addFocusToSelection
    at setDraftEditorSelection
    at DraftEditorLeaf._setSelection
    at DraftEditorLeaf.componentDidUpdate
    at measureLifeCyclePerf
    at CallbackQueue.notifyAll
    at ReactReconcileTransaction.close
    at ReactReconcileTransaction.closeAll
    at ReactReconcileTransaction.perform

this error is tracked down to following moudle: setDraftEditorSelection.js: selection.extend(node, offset)

Which versions of Draft.js, and which browser / OS are affected by this issue?
Chrome Version 58.0.3029.81
Draft-js Version 0.10.0

[kwarr128]

My colleague had the same issue and I wasn't, we narrowed down that the only difference was our Chrome versions. I was on 57 and they were on 58. I also started getting the issue after upgrading to Chrome 58.

Additionally, it only seems to be happening when we have two editors rendered at the same time

[dirkholsopple]

Attempted to fix this by checking for selection type 'None' before extending the Selection https://github.com/facebook/draft-js/pull/1192

[mshibl]

@kwarr128 I don't have two editors rendered ... do you know if this issue has any effect other than getting logged to the console?

[mshibl]

@dirkholsopple I just tested your fix and it did indeed work .. hopefully, it gets merged soon .. thank you

[seejee]

We were encountering this issue once we upgraded to Chrome 58, and I can also confirm that #1192 fixed the issue for us.

[kwarr128]

@mshibl i think my issue might be more directly related to the problem described in #1190, but i think #1192 fixes it too

[sophiebits]

Can someone who can reliably reproduce this run the Chrome build bisect script to see what Chrome change might have introduced this?

https://www.chromium.org/developers/bisect-builds-py

We should probably file a bug with Chrome. I think that skipping the .extend call is not the right solution and might cause other problems.

[ahutchings]

Looks like this was an intentional change to bring Chrome behavior in line with the Selection API spec.

https://bugs.chromium.org/p/chromium/issues/detail?id=690240

[sophiebits]

The problem is not that .extend throws when there are no ranges. That's expected. But there are some cases where calling .addRange does not seem to properly add the range, and we don't know why that is.

[lzszone]

I got the same issue when I was trying to do a tex demo, my solution is to add readOnly prop in the Editor component, I just ignore this property, and the error occurs, hope this could be helpful.

[flarnie]

Thanks for the info everyone - it would be really helpful if anyone could come up with a minimal repro of this issue without using Draft that demonstrates the issue. Then we can file a bug with Chrome itself, and stay updated if there is a fix.

We have a possible fix in https://github.com/facebook/draft-js/pull/1190 and just want to make sure we understand why this happens and follow up with the Chrome team before paving over it in our code.

If anyone here has time to look into it that would help us out a lot. Otherwise, we'll hopefully have time to try ourselves sometime in the next few weeks.

[adamtal3]

This error seemed to cause me other issues and I didn't have the option to wait for the PR so this is the patch I created in my app to fix it:

  const _addRange = Selection.prototype.addRange;
  Selection.prototype.addRange = function() {
    _addRange.apply(this, arguments);

    if (this.rangeCount === 0) {
      _addRange.apply(this, arguments);
    }
  }

[sophiebits]

I think I have a real fix for this. Turns out it's not a browser bug. See my comments on the other thread: https://github.com/facebook/draft-js/pull/1190#issuecomment-320413948.

[shpakkdv]

Similar issue still exists.
Faced with this in Safari (only) when Draft.js is updating the editor state.
The error which I see: IndexSizeError: The index is not in the allowed range.

My solution / hack:

  const nativeSelectionExtend = Selection.prototype.extend;

  Selection.prototype.extend = function (...args) {
    try {
      return nativeSelectionExtend.apply(this, args);
    } catch (error) {
      console.log('Selection error.', error);
    }
  };

It works properly for me. Maybe will be useful for somebody as well.