Focus text field when focusing spinner

.changeset/warm-points-punch.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Updated `TextField` of `type` `number` to focus when a `Spinner` button is clicked

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

@@ -70,10 +70,11 @@ $spinner-icon-size: 12px;
 
 .focus > .Input,
 .focus > .VerticalContent,
+.TextField:focus-within > .Input,
 .Input:focus-visible {
   outline: none;
 
-  // stylelint-disable-next-line selector-max-class, selector-max-combinators -- generated by polaris-migrator DO NOT COPY
+  // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- outline based on child focus requires complex specificity
   ~ .Backdrop {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring($style: 'focused');

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

@@ -4,14 +4,17 @@ import {
   Button,
   LegacyCard,
   ChoiceList,
+  Form,
   FormLayout,
   InlineError,
   Select,
   LegacyStack,
   Tag,
+  Text,
   TextField,
   Icon,
   Tooltip,
+  VerticalStack,
 } from '@shopify/polaris';
 import {
   DeleteMinor,
@@ -829,3 +832,37 @@ export function All() {
     </FormLayout>
   );
 }
+
+export function WithFormSubmit() {
+  const [adjustment, setAdjustment] = useState('0');
+  const [onHandTotal, setOnHandTotal] = useState(0);
+
+  return (
+    <VerticalStack gap="2">
+      <Form
+        onSubmit={(event) => {
+          event.preventDefault();
+          setAdjustment('0');
+          setOnHandTotal(onHandTotal + parseInt(adjustment, 10));
+        }}
+      >
+        <FormLayout>
+          <Text as="h2" variant="headingSm">
+            On hand quantity ({onHandTotal.toString()})
+          </Text>
+          <TextField
+            label="Adjustment"
+            value={adjustment}
+            onChange={(value) => setAdjustment(value)}
+            autoComplete="off"
+            type="number"
+            selectTextOnFocus
+          />
+          <Button primary submit disabled={isNaN(parseInt(adjustment, 10))}>
+            Save
+          </Button>
+        </FormLayout>
+      </Form>
+    </VerticalStack>
+  );
+}

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');