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

NumberControl: Disable drag functionality on touch devices #68514

Open
wants to merge 1 commit into
base: trunk
Choose a base branch
from
Open

NumberControl: Disable drag functionality on touch devices #68514

wants to merge 1 commit into from

Conversation

Infinite-Null
Copy link
Contributor

@Infinite-Null Infinite-Null commented Jan 7, 2025 •
edited
Loading

Closes: #38865

What?

Disable the drag-to-change-value gesture in NumberControl when used on touch devices.

Why?

  • Dragging gesture doesn't work well on touch devices as there's no cursor feedback
  • Easy to accidentally change values when trying to tap or move text cursor
  • Poor user experience on mobile/tablet devices

How?

  • Added a isTouchDevice() utility function that detects touch capability using:

    • 'ontouchstart' in window
    • navigator.maxTouchPoints

  • Modified isDragEnabled to consider both the prop value AND touch device status

  • Drag functionality disables on touch devices while remaining enabled for desktop users

Screencast

Before

Screen.Recording.2025-01-07.at.11.37.21.AM.mov

After

Screen.Recording.2025-01-07.at.11.32.03.AM.mov

@Infinite-Null Infinite-Null marked this pull request as ready for review January 7, 2025 13:29
@github-actions GitHub Actions
Copy link

github-actions bot commented Jan 7, 2025

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Infinite-Null <[email protected]>
Co-authored-by: SohamPatel46 <[email protected]>
Co-authored-by: mirka <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@Mamaduka Mamaduka added [Type] Bug An existing feature does not function as intended [Package] Components /packages/components labels Jan 13, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
[Package] Components /packages/components [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

NumberControl: Disable dragging on touch devices
2 participants
@Infinite-Null @Mamaduka