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.

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

Slider text is occasionally selected when dragging the pin #9522

Closed
3 of 6 tasks
evan-cx opened this issue Jun 5, 2024 · 7 comments
Closed
3 of 6 tasks

Slider text is occasionally selected when dragging the pin #9522

evan-cx opened this issue Jun 5, 2024 · 7 comments
Assignees
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components Issues specific to the @esri/calcite-components package. calcite-components-react Issues specific to the @esri/calcite-components-react package. estimate - 3 A day or two of work, likely requires updates to tests. good first issue Issues that can be worked on by contributors new to calcite-components. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone p - medium Issue is non core or affecting less that 60% of people using the library

Comments

@evan-cx
Copy link

evan-cx commented Jun 5, 2024

Check existing issues

Actual Behavior

Slider labels and ticks are highlighted when moving the pin around.

image
calcite_slider_text_selected

Expected Behavior

I'm expecting that text would not get highlighted when dragging the pin around.

Reproduction Sample

https://developers.arcgis.com/calcite-design-system/components/slider/

Reproduction Steps

Use the "Slider with Label Formatter" sample.

Reproduction Version

2.8 (?)

Relevant Info

No response

Regression?

No response

Priority impact

impact - p2 - want for an upcoming milestone

Impact

Was noted during system testing as something that we want to have fixed by end of September.

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-angular
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/eslint-plugin-calcite-components

Esri team

N/A

@evan-cx evan-cx 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 Jun 5, 2024
@github-actions github-actions bot added calcite-components Issues specific to the @esri/calcite-components package. calcite-components-react Issues specific to the @esri/calcite-components-react package. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone labels Jun 5, 2024
@geospatialem geospatialem added p - medium Issue is non core or affecting less that 60% of people using the library estimate - 3 A day or two of work, likely requires updates to tests. and removed needs triage Planning workflow - pending design/dev review. labels Jun 10, 2024
@geospatialem geospatialem added this to the 2024-08-27 - Aug Release milestone Jun 10, 2024
@geospatialem
Copy link
Member

Potential solution is using user-select="none"

@evan-cx
Copy link
Author

evan-cx commented Jun 10, 2024

@geospatialem , that is what our team ended up doing. Thanks for confirming that approach!

@driskull
Copy link
Member

user-select:none on the appropriate label container is the correct fix for this. This could be a "good first issue" as its pretty basic.

@geospatialem geospatialem added the good first issue Issues that can be worked on by contributors new to calcite-components. label Jul 24, 2024
@DitwanP DitwanP self-assigned this Jul 24, 2024
@DitwanP DitwanP added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Jul 24, 2024
@jcfranco
Copy link
Member

If we ever wanted to make the drag area smaller to allow label/tick selection (e.g., custom formatter), we could also call preventDefault on the pointerdown to prevent selection.

@geospatialem geospatialem added the ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript team members. label Aug 12, 2024
DitwanP added a commit that referenced this issue Aug 15, 2024
**Related Issue:** #9522

## Summary
Prevents unintended text selection as you interact with the slider
component.
@DitwanP DitwanP added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Aug 15, 2024
Copy link
Contributor

Installed and assigned for verification.

@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 Aug 15, 2024
@geospatialem
Copy link
Member

Verified in 2.12.0-next.20 🎉

verify-9522

@jcfranco
Copy link
Member

If we ever wanted to make the drag area smaller to allow label/tick selection (e.g., custom formatter), we could also call preventDefault on the pointerdown to prevent selection.

Actually, scratch that. This approach would mess with expected mouse events.

nothing-to-see

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components Issues specific to the @esri/calcite-components package. calcite-components-react Issues specific to the @esri/calcite-components-react package. estimate - 3 A day or two of work, likely requires updates to tests. good first issue Issues that can be worked on by contributors new to calcite-components. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone p - medium Issue is non core or affecting less that 60% of people using the library
Projects
None yet
Development

No branches or pull requests

5 participants