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

Update drag gesture of InputControl-based controls with axial constraint #38968

Merged
merged 2 commits into from
Mar 1, 2022

Conversation

stokesman
Copy link
Contributor

@stokesman stokesman commented Feb 21, 2022

This is largely intended as an enhancement though it is also a bug fix (for some browsers). As a bug fix, in Safari and Firefox, it allows drag gestures to highlight text as expected.

Testing Instructions

  1. In Storybook or the Block Editor, find a NumberControl or UnitControl
  2. Verify that dragging works to adjust the value
  3. If using Firefox or Safari, verify that dragging to select the input value works as expected.

Screenshots

Before: Unexpected interference with input value selection (Firefox and Safari)

before-input-control-axial.mp4

After: Input value selection works as expected

after-input-control-axial.mp4

Types of changes

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).
  • I've updated related schemas if appropriate.

@stokesman stokesman added [Package] Components /packages/components [Type] Enhancement A suggestion for improvement. Browser Issues Issues or PRs that are related to browser specific problems [Type] Bug An existing feature does not function as intended labels Feb 21, 2022
@stokesman stokesman marked this pull request as ready for review February 21, 2022 20:54
@ciampo ciampo requested review from mirka and ciampo February 22, 2022 13:04
Copy link
Member

@mirka mirka left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great fix, it's working well for me in all browsers ✨ Once we add a changelog entry, I think the fix part is ready to go.

packages/components/src/input-control/input-field.tsx Outdated Show resolved Hide resolved
@stokesman stokesman force-pushed the update/input-control-drag-gesture-axis branch from 22641ab to 9b78e98 Compare March 1, 2022 16:00
@stokesman stokesman force-pushed the update/input-control-drag-gesture-axis branch from 9b78e98 to 11c8c97 Compare March 1, 2022 16:10
@stokesman
Copy link
Contributor Author

@mirka, Thanks for testing and reviewing. I think this should be good to go now.

Copy link
Member

@mirka mirka left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's :shipit:

@stokesman stokesman merged commit 5044831 into trunk Mar 1, 2022
@stokesman stokesman deleted the update/input-control-drag-gesture-axis branch March 1, 2022 18:51
@github-actions github-actions bot added this to the Gutenberg 12.8 milestone Mar 1, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Browser Issues Issues or PRs that are related to browser specific problems [Package] Components /packages/components [Type] Bug An existing feature does not function as intended [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants