Fix spin buttons of number inputs in Safari (#38840)

* Upgrade react-use-gesture to @use-gesture/react * Avoid pointer capture during drag gestures in `InputControl` * Remove event.persist call * Add changelog entry
WordPress · Feb 17, 2022 · 2df751a · 2df751a
1 parent b248d84
commit 2df751a
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 13 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Bug Fix
+
+-   Fix spin buttons of number inputs in Safari ([#38840](https://github.com/WordPress/gutenberg/pull/38840))
+
 ## 19.4.0 (2022-02-10)
 
 ### Bug Fix

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -36,6 +36,7 @@
 		"@emotion/serialize": "^1.0.2",
 		"@emotion/styled": "^11.6.0",
 		"@emotion/utils": "1.0.0",
+		"@use-gesture/react": "^10.2.6",
 		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/compose": "file:../compose",
 		"@wordpress/date": "file:../date",
@@ -65,7 +66,6 @@
 		"react-colorful": "^5.3.1",
 		"react-dates": "^17.1.1",
 		"react-resize-aware": "^3.1.0",
-		"react-use-gesture": "^9.0.0",
 		"reakit": "^1.3.8",
 		"uuid": "^8.3.0"
 	},

diff --git a/packages/components/src/box-control/unit-control.js b/packages/components/src/box-control/unit-control.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { noop } from 'lodash';
-import { useHover } from 'react-use-gesture';
+import { useHover } from '@use-gesture/react';
 
 /**
  * Internal dependencies

diff --git a/packages/components/src/input-control/input-field.tsx b/packages/components/src/input-control/input-field.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { noop } from 'lodash';
-import { useDrag } from 'react-use-gesture';
+import { useDrag } from '@use-gesture/react';
 import type {
 	SyntheticEvent,
 	ChangeEvent,
@@ -168,9 +168,6 @@ function InputField(
 	const dragGestureProps = useDrag< PointerEvent< HTMLInputElement > >(
 		( dragProps ) => {
 			const { distance, dragging, event } = dragProps;
-			// The event is persisted to prevent errors in components using this
-			// to check if a modifier key was held while dragging.
-			event.persist();
 
 			if ( ! distance ) return;
 			event.stopPropagation();
@@ -196,6 +193,7 @@ function InputField(
 		{
 			threshold: dragThreshold,
 			enabled: isDragEnabled,
+			pointer: { capture: false },
 		}
 	);
 

diff --git a/packages/components/src/input-control/types.ts b/packages/components/src/input-control/types.ts
@@ -7,7 +7,7 @@ import type {
 	ChangeEvent,
 	SyntheticEvent,
 } from 'react';
-import type { useDrag } from 'react-use-gesture';
+import type { useDrag } from '@use-gesture/react';
 
 /**
  * Internal dependencies