[TextField]: Enable proper focus when clicking the stepper

.changeset/warm-cars-fry.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Added `onBlur` prop to numerical steppers (`Spinner` component of `TextField`) to remove multi focus issue in `TextField`.

polaris-react/src/components/TextField/TextField.stories.tsx

@@ -34,17 +34,28 @@ export function Default() {
 
 export function Number() {
   const [value, setValue] = useState('1');
+  const [value1, setValue1] = useState('1');
 
   const handleChange = useCallback((newValue) => setValue(newValue), []);
+  const handleChange1 = useCallback((newValue) => setValue1(newValue), []);
 
   return (
-    <TextField
-      label="Quantity"
-      type="number"
-      value={value}
-      onChange={handleChange}
-      autoComplete="off"
-    />
+    <Stack vertical>
+      <TextField
+        label="First Quantity"
+        type="number"
+        value={value}
+        onChange={handleChange}
+        autoComplete="off"
+      />
+      <TextField
+        label="Second Quantity"
+        type="number"
+        value={value1}
+        onChange={handleChange1}
+        autoComplete="off"
+      />
+    </Stack>
   );
 }
 

polaris-react/src/components/TextField/TextField.tsx

@@ -407,6 +407,7 @@ export function TextField({
         onMouseDown={handleButtonPress}
         onMouseUp={handleButtonRelease}
         ref={spinnerRef}
+        onBlur={handleOnBlur}
       />
     ) : null;
 
@@ -477,14 +478,6 @@ export function TextField({
     }
   };
 
-  const handleOnBlur = (event: React.FocusEvent) => {
-    setFocus(false);
-
-    if (onBlur) {
-      onBlur(event);
-    }
-  };
-
   const input = createElement(multiline ? 'textarea' : 'input', {
     name,
     id,
@@ -636,6 +629,14 @@ export function TextField({
     event.preventDefault();
   }
 
+  function handleOnBlur(event: React.FocusEvent) {
+    setFocus(false);
+
+    if (onBlur) {
+      onBlur(event);
+    }
+  }
+
   function isInput(target: HTMLElement | EventTarget) {
     return (
       target instanceof HTMLElement &&

polaris-react/src/components/TextField/components/Spinner/Spinner.tsx

@@ -11,10 +11,11 @@ export interface SpinnerProps {
   onClick?(event: React.MouseEvent): void;
   onMouseDown(onChange: HandleStepFn): void;
   onMouseUp(): void;
+  onBlur(event: React.FocusEvent): void;
 }
 
 export const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(
-  function Spinner({onChange, onClick, onMouseDown, onMouseUp}, ref) {
+  function Spinner({onChange, onClick, onMouseDown, onMouseUp, onBlur}, ref) {
     function handleStep(step: number) {
       return () => onChange(step);
     }
@@ -35,6 +36,7 @@ export const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(
           onClick={handleStep(1)}
           onMouseDown={handleMouseDown(handleStep(1))}
           onMouseUp={onMouseUp}
+          onBlur={onBlur}
         >
           <div className={styles.SpinnerIcon}>
             <Icon source={CaretUpMinor} />
@@ -47,6 +49,7 @@ export const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(
           onClick={handleStep(-1)}
           onMouseDown={handleMouseDown(handleStep(-1))}
           onMouseUp={onMouseUp}
+          onBlur={onBlur}
         >
           <div className={styles.SpinnerIcon}>
             <Icon source={CaretDownMinor} />

polaris-react/src/components/TextField/components/Spinner/tests/Spinner.test.tsx

@@ -4,11 +4,18 @@ import {mountWithApp} from 'tests/utilities';
 import {Spinner} from '../Spinner';
 
 describe('<Spinner />', () => {
+  const defaultProps = {
+    onChange: noop,
+    onMouseDown: noop,
+    onMouseUp: noop,
+    onBlur: noop,
+  };
+
   describe('onChange', () => {
     it('adds a change callback', () => {
       const spy = jest.fn();
       const spinner = mountWithApp(
-        <Spinner onChange={spy} onMouseDown={noop} onMouseUp={noop} />,
+        <Spinner {...defaultProps} onChange={spy} />,
       );
 
       spinner.find('div', {role: 'button'})!.trigger('onClick');
@@ -19,14 +26,7 @@ describe('<Spinner />', () => {
   describe('onClick', () => {
     it('adds a click callback', () => {
       const spy = jest.fn();
-      const spinner = mountWithApp(
-        <Spinner
-          onClick={spy}
-          onChange={noop}
-          onMouseDown={noop}
-          onMouseUp={noop}
-        />,
-      );
+      const spinner = mountWithApp(<Spinner {...defaultProps} onClick={spy} />);
       spinner.find('div', {className: 'Spinner'})!.trigger('onClick');
       expect(spy).toHaveBeenCalledTimes(1);
     });
@@ -40,9 +40,9 @@ describe('<Spinner />', () => {
       const changeSpy = jest.fn();
       const spinner = mountWithApp(
         <Spinner
+          {...defaultProps}
           onChange={changeSpy}
           onMouseDown={mouseDownSpy}
-          onMouseUp={noop}
         />,
       );
 
@@ -61,9 +61,9 @@ describe('<Spinner />', () => {
       const changeSpy = jest.fn();
       const spinner = mountWithApp(
         <Spinner
+          {...defaultProps}
           onChange={changeSpy}
           onMouseDown={mouseDownSpy}
-          onMouseUp={noop}
         />,
       );
 
@@ -80,14 +80,25 @@ describe('<Spinner />', () => {
     it('adds a mouse up callback', () => {
       const spy = jest.fn();
       const spinner = mountWithApp(
-        <Spinner onChange={noop} onMouseDown={noop} onMouseUp={spy} />,
+        <Spinner {...defaultProps} onMouseUp={spy} />,
       );
 
       spinner.find('div', {role: 'button'})!.trigger('onMouseUp');
 
       expect(spy).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe('onBlur()', () => {
+    it('is called when the stepper is blurred', () => {
+      const onBlurSpy = jest.fn();
+      const spinner = mountWithApp(
+        <Spinner {...defaultProps} onBlur={onBlurSpy} />,
+      );
+      spinner.find('div', {role: 'button'})!.trigger('onBlur');
+      expect(onBlurSpy).toHaveBeenCalledTimes(1);
+    });
+  });
 });
 
 function noop() {}