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.

Sign up for GitHub

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

Jump to bottom

Calcite range slider not working properly on touch laptop #4290

Closed
daniellaumer opened this issue Mar 23, 2022 · 12 comments
Closed

Calcite range slider not working properly on touch laptop #4290

daniellaumer opened this issue Mar 23, 2022 · 12 comments
Assignees
@geospatialem
Labels
4 - verified Issues that have been released and confirmed resolved. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. p - medium Issue is non core or affecting less that 60% of people using the library
Milestone
2023 February Pri...

Comments

@daniellaumer
Copy link

Actual Behavior

When trying to drag a calcite slider on a laptop with touch screen, the dragging of the slider does not work. The slider thumb keeps stopping and you have to re-drag it. See attached screenshot:
CalciteSliderDrag

Note: A common html range slider works fine.

Expected Behavior

The expected behaviour is that the slider thumb follows the touch gesture and does not stop.

Reproduction Sample

Just any calcite slider

Reproduction Steps

Open any example of a calcite slider on a laptop with touchscreen, for example this one: https://developers.arcgis.com/calcite-design-system/components/slider/

Not sure though if it happens for all touch laptops, the problem occured on a Dell Precision 5560

Reproduction Version

beta.2

Relevant Info

Windows 10, Chrome and Edge, Hardware: Dell Precision 5560

Regression?

Probably never worked
@daniellaumer daniellaumer added 0 - new New issues that need assignment. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. needs triage Planning workflow - pending design/dev review. labels Mar 23, 2022
@jcfranco
Copy link
Member

@daniellaumer Thanks for reporting this.

Additional testing on Windows 10 (thanks @bsvensson!) revealed issues with the following:

  • Chrome version 99.0.4844.82 (Official Build) (64-bit)
  • Chrome Version 100.0.4896.46 (Official Build) beta (64-bit)
  • Chrome Version 100.0.4896.56 (Official Build) beta (64-bit)
  • Edge 99
  • Firefox 99 (probably the worse, similar to Edge 99)
  • Firefox Beta 100 (behaves like Chrome)

@benelan benelan removed the needs triage Planning workflow - pending design/dev review. label Apr 8, 2022
driskull added a commit that referenced this issue Jul 27, 2022
@driskull
fix(slider): Focus active handle on pointerdown instead of click. (#4290
c4a0f57 
)
@driskull driskull mentioned this issue Jul 27, 2022
Merged
@driskull driskull self-assigned this Jul 27, 2022
@driskull driskull added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. labels Jul 27, 2022
driskull added a commit that referenced this issue Jul 28, 2022
@driskull
fix(slider): Focus active handle on pointerdown instead of click (#5037)
24a6b95 
fix(slider): Focus active handle on pointerdown instead of click. (#4290)
@driskull driskull removed the 2 - in development Issues that are actively being worked on. label Jul 28, 2022
@jcfranco jcfranco added p - medium Issue is non core or affecting less that 60% of people using the library 0 - new New issues that need assignment. and removed p - low Issue is non core or affecting less that 10% of people using the library 1 - assigned Issues that are assigned to a sprint and a team member. labels Nov 8, 2022
@Elijbet Elijbet self-assigned this Dec 29, 2022
@Elijbet Elijbet added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. labels Mar 1, 2023
@Elijbet Elijbet mentioned this issue Mar 2, 2023
Merged
Elijbet added a commit that referenced this issue Mar 2, 2023
@Elijbet
fix(slider): range slider thumb on all touch-enabled devices now foll…
70cade7 
…ows touch gesture (#6553)

**Related Issue:** #4290

## Summary

Replicated the issue on a PC tablet (Dell Precision 5560 per use case)
and noticed that the slider was being blocked by the browser swipe
gesture. Happened on several browsers tested on this device (Chrome
110.0.5481, MicrosoftEdge 11.0.1587).


https://user-images.githubusercontent.com/19231036/222330979-31a80b8e-4ab8-41d1-aaa5-812248e6e838.mp4


Solved by disabling browser swipe navigation to next/previous page to
prevent interference with the slide thumb intended functionality to
follow touch gesture. The fix will apply to all touch-enabled devices,
including iOS and and tablets running other operating systems.

Can't see a way to automatically test it in our setup, maybe we could
add a wiki or confluence page for the slider behavior on other devices
(any slider part should use touch-action: none because ...).
@Elijbet Elijbet added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Mar 2, 2023
@geospatialem
Copy link
Member

@daniellaumer 1.1.0 has been released and includes a fix to the above issue. however I don't have access to a touch laptop to verify the fix.

Would you be able to verify if the fix is working with 1.1.0 in the following Codepen?

@geospatialem
Copy link
Member

@bsvensson Would you be able to verify if the above fix is working with 1.1.0 in the following Codepen with your touch laptop?

@geospatialem geospatialem assigned geospatialem and unassigned Elijbet Apr 11, 2023
@bsvensson
Copy link
Member

@geospatialem Yes, 1.1.0 works great on my Dell touch laptop using both Chrome Beta 112.0.5615.49 and Chrome 111.0.5563.147 (while 1.0.8 does not).

@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Apr 13, 2023
@geospatialem
Copy link
Member

Thanks much! Closing out and marking as verified per Bjorn's verification above.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

Labels
4 - verified Issues that have been released and confirmed resolved. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. p - medium Issue is non core or affecting less that 60% of people using the library
Projects
None yet
Milestone
2023 February Priorities - 1.1.0 - No...
Development

No branches or pull requests
8 participants
@jcfranco @bsvensson @driskull @alisonailea @geospatialem @benelan @Elijbet @daniellaumer