Adds support for pointer events to useDrag1D
#1069
Closed
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #1063
This adds support with feature detection for
PointerEvents
to the existinguseDrag1D
, without altering its declared API.In reality, several places were making use of items passed back in the output of
useDrag1D
in a way that was probably not intended in the API, by limiting the returned properties in order to do things like event chaining. I fixed all the places that were doing this to be compatible with my changes, and added tests that cover all existing uses of useDrag1D to use pointerEvents as well as mouseEvents. I also added thetouch-events: none
CSS declaration to draggable elements so that they can be dragged using PointerEvents without triggering things like scrolling.Worth noting:
JSDOM doesn't support PointerEvents currently, as it is missing the event type for
PointerEvent
on the window object. I added my own (rather poor) polyfill in order to support testing of PointerEvents via JSDOM/jest. It should be removed if/when JSDOM adds support for PointerEvents (see: jsdom/jsdom#2666).Also, I had to work around a testing-library bug with PointerEvents as well:
The workaround is pretty harmless (see line 18 in SplitView.test.js. That workaround can be removed when testing-library/react-testing-library#783 is fixed and we've upgraded to that version of testing-library.
✅ Pull Request Checklist:
📝 Test Instructions:
Manual testing steps:
Modern desktop browser:
Visit the storybook for Slider and Split view.
The Slider and Split view should work the same as they did before this change, you are able to drag the draggable elements.
Modern mobile browser:
Visit the storybook for Slider and Split view. It should be possible to drag the draggable elements, before this change it was not.
Legacy browser that doesn't support PointerEvents (Safari 12 or IE 10):
Visit the storybook for Slider and Split view. It should work as it did before this change, as it still uses mouse events.
🧢 Your Project:
Not for any particular project, just because I was interested.