feature/touchscreen-friendly #608
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ngePicker, however, this is still a WIP and needs cleanup (removing DOM manipulation in favor of lifting up the state) and testing to ensure that this isn't breaking anything in other use cases
… touchmove events; used a new attribute on the button to access day prop from sibling DayCell components as touch events do not retarget as touch point moves but are anchored to initial touchstart target
…e an end date in 1970/1969 even though the calendar is displaying selection for 2023. Attempting to locate the cause for this issue to correct it
…-day attribute and handle it gracefully if the element is not found in the elementsByPoint return value. Removed debug logging statements.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Types of changes
I've added touch event handlers to the DayCell component to make date range selection more user friendly on touchscreen devices.
Put an
xin the boxes that applyDescription
Previously, when using a touchscreen device it was difficult to select a range of dates. It was necessary to open the DateRangePicker tap the start date of the desired range (which would then close the picker), then reopen the DateRangePicker, tap the end date input box at the top, then tap the desired end date to select the range.
With this enhancement, you open the DateRangePicker, begin by touching and holding your finger on the desired start date (or simply tap for a single day, rather than a range). Next, to select a range, swipe/drag to the desired end date. When you lift your finger to end the touch interaction, the selected date range is set.
You can easily see the selected dates change as you interact with the calendar as the selection is highlighted just as it is when using a mouse.
Methodology
To accomplish this enhancement, I am using document.elementsFromPoint with coordinates from the touchmove events to emulate the mouseenter behavior. Unlike mouse events, touch events do not retarget as the touch point is moved over different elements, it stays anchored to the element at the first touch point (the start day of the range being selected). Because of this, as the touch is moved and when the touch ends, it is the start day that is the target of the fired events and that will call the onDragSelection... functions (using the mouse... aliases from the props). So, I needed a way for the first selected day to be aware of the date that the touch was currently over and where it ended. I thought about making changes in a parent component that had access to all the child DayCells, but instead decided to add a data-day attribute to each DayCell button which the starting day (sibling element) could access. This seemed to be more consistent with the existing mouse handling and involve fewer code changes.
Review
I have done local testing using Chrome developer tools using device emulation. I've also run
yarn run lintandyarn run testand did not get any issues or errors related to this code (there were some warnings about babylon being deprecated, no license field in package.json, and updating caniuse-lite, but these were not part of the work in this branch and all tests passed).Still, any review and feedback on this work is welcome and appreciated!
Thanks!