Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

This Selection object doesn't have any Ranges #1188

Closed
mshibl opened this issue May 2, 2017 · 13 comments
Closed

This Selection object doesn't have any Ranges #1188

mshibl opened this issue May 2, 2017 · 13 comments

Comments

@mshibl
Copy link

@mshibl mshibl commented May 2, 2017

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

This comment has been minimized.

Copy link

@kwarr128 kwarr128 commented May 5, 2017

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

This comment has been minimized.

Copy link

@dirkholsopple dirkholsopple commented May 5, 2017

Attempted to fix this by checking for selection type 'None' before extending the Selection #1192

@mshibl

This comment has been minimized.

Copy link
Author

@mshibl mshibl commented May 6, 2017

@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

This comment has been minimized.

Copy link
Author

@mshibl mshibl commented May 6, 2017

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

@seejee

This comment has been minimized.

Copy link

@seejee seejee commented May 8, 2017

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

@kwarr128

This comment has been minimized.

Copy link

@kwarr128 kwarr128 commented May 8, 2017

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

@sophiebits

This comment has been minimized.

Copy link
Contributor

@sophiebits sophiebits commented May 13, 2017

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

This comment has been minimized.

Copy link

@ahutchings ahutchings commented May 14, 2017

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

This comment has been minimized.

Copy link
Contributor

@sophiebits sophiebits commented Jun 15, 2017

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

This comment has been minimized.

Copy link

@lzszone lzszone commented Jul 4, 2017

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

This comment has been minimized.

Copy link
Contributor

@flarnie flarnie commented Jul 14, 2017

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 #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.

@flarnie flarnie added the help wanted label Jul 14, 2017
@adamtal3

This comment has been minimized.

Copy link

@adamtal3 adamtal3 commented Aug 1, 2017

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

This comment has been minimized.

Copy link
Contributor

@sophiebits sophiebits commented Aug 5, 2017

I think I have a real fix for this. Turns out it's not a browser bug. See my comments on the other thread: #1190 (comment).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

9 participants
You can’t perform that action at this time.