React: `onSelectionChange` event

[devongovett]

The onSelect event does not fire while the user is dragging the mouse, only after they release. It would be nice to have an event that fired immediately whenever the selection changed, including while dragging the mouse. This is useful, for example, when syncing selections between multiple collaborators, ala google docs.

The native selectionchange event is supported cross browser, way back in IE, Chrome, and Safari, and recently in Firefox 43. Is this something React could polyfill and expose to components?

[YurkaninRyan]

Do any of the more seasoned contributors have any opinions on what this should look like? Should it just become a feature of onSelect or does it merit it's own event hook?

It seems like the current React onSelect is a bit of a mixture of the two already.

[gaearon]

Seems reasonable to me to mirror the browser API.

[flarnie]

I'd like to look into this because it could affect Draft.js. Will post more when I get time.

[raphasilvac]

Hello @flarnie,
I think it would be nice for Draft.js

I think there is a problem on Draft.js,
the selectionState is only updated after "mouseup",
if you keep mouse pressed and paste or write some word you will see that the word or some part of it goes to a wrong place ("previous selectionState").

This is reproducible on Draft.js home/demo page and on facebook status field. (macOS: chrome, FF and Safari)

I think it is not a good solution, but for a test I added the following code on Draft.js componentDidMount:
document.addEventListener("selectionchange", this._onSelect);

In my tests it works, but maybe you can know some unexpected effect about it.

Sorry about my english!

Thank you.

[ianstormtaylor]

@flarnie any word on this? We'd love this for Slate.js as well!

FWIW, I'd propose that it just be implemented as:

onSelectionChange={...}
onSelectionStart={...}

Different than the existing onSelect, to not have to worry about backwards compatibility, since onSelect fires much less frequently. (And is kind of like a pseudo-onSelectionEnd.) That way people can opt into using onSelectionChange/Start but do it in a way that takes throttling into account.

I don't know much about React events, but if they're just pass-throughs with no complex compatibility logic, they might be fairly easy to implement?

[noahlemen]

came across this PR and noticed it hadn't been linked here yet -- for documentation's sake, it looks like a attempt at this was made in #10746. in a comment, @gaearon mentioned that it may be best to expose the event, but not add a polyfill.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[ianstormtaylor]

Not stale!

This is still a pain point that's lacking in React's API. I'm not sure what the solution is since it seems like no new events are being added to React despite them being standardized?

[TrySound]

This will probably be a solution
https://github.com/facebook/react/pull/17651

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!