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
feat(Listbox): tap range select #1208
Conversation
# Conflicts: # apis/nucleus/src/components/listbox/interactions/listbox-keyboard-navigation.js
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Have you tested on a real touch device?
I think it will work if you don't move the fingers during the tap.
but I am unsure what happens if you do. (and if that is what we want)
Yes I tested it on a iPad. I noticed that the old listbox seems to prevent gestures (like zoom) inside the listbox, so I added that as well. ffaf757 I have also tried to update the touch positions with |
@@ -16,6 +23,25 @@ export default function useSelectionsInteractions({ selectionState, selections, | |||
touchRangeSmall: false, | |||
}); | |||
|
|||
useEffect(() => { | |||
if (!loaderRef.current?._listRef?._outerRef) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
what is this for?
listRef.removeEventListener('gesturechange', preventGestureChange); | ||
listRef.removeEventListener('gestureend', preventGestureEnd); | ||
}; | ||
}, [loaderRef.current?._listRef?._outerRef]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this can maybe be a problem as
loaderRef.current?._listRef?._outerRef could probably without updating the effect
if the update do not also trigger a rerender of the listbox
Motivation
Use two finger tap to select a range on touch devices.
fixes qlik-oss/sn-list-objects#163
Single-column:
Grid-column:
Grid-row:
Requirements checklist
yarn spec
When build and tests have passed: