Focus text field when focusing spinner

Author: highfieldjames

.changeset/warm-points-punch.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Focus on TextField on Spinner click

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

@@ -70,6 +70,7 @@ $spinner-icon-size: 12px;
 
 .focus > .Input,
 .focus > .VerticalContent,
+.TextField:focus-within > .Input,
 .Input:focus-visible {
   outline: none;
 

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

@@ -4,6 +4,7 @@ import {
   Button,
   LegacyCard,
   ChoiceList,
+  Form,
   FormLayout,
   InlineError,
   Select,
@@ -829,3 +830,27 @@ export function All() {
     </FormLayout>
   );
 }
+
+export function WithFormSubmit() {
+  const [textFieldValue, setTextFieldValue] = useState('0');
+
+  return (
+    <Form
+      onSubmit={(event) => {
+        event.preventDefault();
+        setTextFieldValue('0');
+      }}
+    >
+      <FormLayout>
+        <TextField
+          label="Store name"
+          value={textFieldValue}
+          onChange={(value) => setTextFieldValue(value)}
+          autoComplete="off"
+          type="number"
+        />
+        <Button submit>Submit</Button>
+      </FormLayout>
+    </Form>
+  );
+}

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

@@ -401,11 +401,11 @@ export function TextField({
     ],
   );
 
-  const handleButtonRelease = useCallback(() => {
+  const handleSpinnerButtonRelease = useCallback(() => {
     clearTimeout(buttonPressTimer.current);
   }, []);
 
-  const handleButtonPress: SpinnerProps['onMouseDown'] = useCallback(
+  const handleSpinnerButtonPress: SpinnerProps['onMouseDown'] = useCallback(
     (onChange) => {
       const minInterval = 50;
       const decrementBy = 10;
@@ -422,20 +422,20 @@ export function TextField({
 
       buttonPressTimer.current = window.setTimeout(onChangeInterval, interval);
 
-      document.addEventListener('mouseup', handleButtonRelease, {
+      document.addEventListener('mouseup', handleSpinnerButtonRelease, {
         once: true,
       });
     },
-    [handleButtonRelease],
+    [handleSpinnerButtonRelease],
   );
 
   const spinnerMarkup =
     isNumericType && step !== 0 && !disabled && !readOnly ? (
       <Spinner
         onClick={handleClickChild}
         onChange={handleNumberChange}
-        onMouseDown={handleButtonPress}
-        onMouseUp={handleButtonRelease}
+        onMouseDown={handleSpinnerButtonPress}
+        onMouseUp={handleSpinnerButtonRelease}
         ref={spinnerRef}
         onBlur={handleOnBlur}
       />
@@ -654,6 +654,7 @@ export function TextField({
     }
 
     setFocus(true);
+    inputRef.current?.focus();
   }
 
   function handleClearButtonPress() {

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

@@ -31,7 +31,7 @@ export const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(
     function handleMouseDown(onChange: HandleStepFn) {
       return (event: React.MouseEvent) => {
         if (event.button !== 0) return;
-        onMouseDown(onChange);
+        onMouseDown?.(onChange);
       };
     }
 

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

@@ -120,6 +120,24 @@ describe('<TextField />', () => {
       expect(onClick).toHaveBeenCalled();
     });
 
+    it('focuses the text field when the spinner is clicked', () => {
+      const event = new MouseEvent('click', {
+        view: window,
+        bubbles: true,
+        cancelable: true,
+      });
+      const textField = mountWithApp(
+        <TextField type="number" label="TextField" autoComplete="off" />,
+      );
+
+      textField
+        .find(Spinner)!
+        .findAll('div', {role: 'button'})[0]!
+        .domNode?.dispatchEvent(event);
+
+      expect(document.activeElement).toBe(textField.find('input')!.domNode);
+    });
+
     it('does not bubble up to the parent element when it occurs in an element other than the input', () => {
       const onClick = jest.fn();
       const children = 'vertical-content-children';
@@ -221,7 +239,7 @@ describe('<TextField />', () => {
       );
 
       expect(textField).toContainReactComponent('input', {
-        id: ':ra:',
+        id: expect.any(String),
       });
     });
 
@@ -330,11 +348,12 @@ describe('<TextField />', () => {
           helpText="Some help"
           onChange={noop}
           autoComplete="off"
+          id="textField"
         />,
       );
 
       expect(textField).toContainReactComponent('input', {
-        'aria-describedby': ':ri:HelpText',
+        'aria-describedby': 'textFieldHelpText',
       });
       expect(textField.find('div')).toContainReactText('Some help');
     });
@@ -369,11 +388,12 @@ describe('<TextField />', () => {
           error="Some error"
           onChange={noop}
           autoComplete="off"
+          id="textField"
         />,
       );
 
       expect(textField).toContainReactComponent('input', {
-        'aria-describedby': ':rk:Error',
+        'aria-describedby': 'textFieldError',
       });
     });
 
@@ -407,11 +427,12 @@ describe('<TextField />', () => {
           helpText="Some help"
           onChange={noop}
           autoComplete="off"
+          id="textField"
         />,
       );
 
       expect(textField).toContainReactComponent('input', {
-        'aria-describedby': ':rm:Error :rm:HelpText',
+        'aria-describedby': 'textFieldError textFieldHelpText',
       });
 
       expect(textField.find('div')).toContainReactText('Some error');