InputControl: ignore the drag gesture on touch devices

packages/components/CHANGELOG.md

@@ -11,6 +11,7 @@
 
 ### Bug Fixes
 
+-   `InputControl`, `NumberControl`, `UnitControl`: Ignore the drag gesture for touch input, where it has no cursor affordance and is easy to trigger by accident ([#38865](https://github.com/WordPress/gutenberg/issues/38865), [#81519](https://github.com/WordPress/gutenberg/pull/81519)).
 -   `Text`: Make single-line truncation and `isBlock` overrides consistent across the main document and iframes ([#82573](https://github.com/WordPress/gutenberg/pull/82573)).
 -   `CardDivider`: Apply the Card's width, display, and border color consistently inside iframes ([#82577](https://github.com/WordPress/gutenberg/pull/82577)).
 

packages/components/src/input-control/input-field.tsx

@@ -133,6 +133,16 @@ function InputField(
 		( dragProps ) => {
 			const { distance, dragging, event, target } = dragProps;
 
+			// The drag gesture is not offered for touch input, where there is
+			// no cursor affordance for it, and where it's easy to accidentally
+			// change the value when only meaning to tap or move the caret.
+			if (
+				event.pointerType === 'touch' ||
+				event.type.startsWith( 'touch' )
+			) {
+				return;
+			}
+
 			// The `target` prop always references the `input` element while, by
 			// default, the `dragProps.event.target` property would reference the real
 			// event target (i.e. any DOM element that the pointer is hovering while

packages/components/src/number-control/test/index.jsdom.test.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it, test, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useState } from '@wordpress/element';
 import _NumberControl from '..';
@@ -557,6 +557,42 @@ describe( 'NumberControl', () => {
 		} );
 	} );
 
+	describe( 'drag to change value', () => {
+		// jsdom implements neither `PointerEvent` nor `Touch`, so the drag
+		// gesture falls back to touch events that have to be built by hand.
+		const fireTouchEvent = (
+			type: string,
+			input: HTMLElement,
+			clientY: number
+		) => {
+			const event = new Event( type, {
+				bubbles: true,
+				cancelable: true,
+			} );
+			const touches = [
+				{ identifier: 1, target: input, clientX: 0, clientY },
+			];
+			Object.assign( event, {
+				touches,
+				targetTouches: touches,
+				changedTouches: touches,
+			} );
+			fireEvent( type === 'touchstart' ? input : window, event );
+		};
+
+		it( 'should not change the value when dragging with touch input', () => {
+			render( <StatefulNumberControl value="5" /> );
+
+			const input = screen.getByRole( 'spinbutton' );
+			fireTouchEvent( 'touchstart', input, 0 );
+			fireTouchEvent( 'touchmove', input, -20 );
+			fireTouchEvent( 'touchmove', input, -60 );
+			fireTouchEvent( 'touchend', input, -60 );
+
+			expect( input ).toHaveValue( 5 );
+		} );
+	} );
+
 	describe( 'custom spin buttons', () => {
 		test.each( [
 			undefined,