[TextField] Prevent onBlur from triggering when clicking between child components (spinner and input)

.changeset/rich-ghosts-push.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed `TextField` blurring when interacting with the `Spinner` buttons

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

@@ -249,6 +249,7 @@ export function TextField({
   const uniqId = useId();
   const id = idProp ?? uniqId;
 
+  const textFieldRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
   const prefixRef = useRef<HTMLDivElement>(null);
@@ -603,7 +604,7 @@ export function TextField({
       readOnly={readOnly}
     >
       <Connected left={connectedLeft} right={connectedRight}>
-        <div className={className} onClick={handleClick}>
+        <div className={className} onClick={handleClick} ref={textFieldRef}>
           {prefixMarkup}
           {inputMarkup}
           {suffixMarkup}
@@ -736,6 +737,11 @@ export function TextField({
   function handleOnBlur(event: React.FocusEvent) {
     setFocus(false);
 
+    // Return early if new focus target is inside the TextField component
+    if (textFieldRef.current?.contains(event?.relatedTarget)) {
+      return;
+    }
+
     if (onBlur) {
       onBlur(event);
     }

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

@@ -227,6 +227,55 @@ describe('<TextField />', () => {
       element.find('input')!.trigger('onBlur');
       expect(spy).toHaveBeenCalled();
     });
+
+    it('is called when the Spinner is blurred', () => {
+      const spy = jest.fn();
+      const element = mountWithApp(
+        <TextField
+          label="TextField"
+          onBlur={spy}
+          onChange={noop}
+          type="number"
+          autoComplete="off"
+        />,
+      );
+      element.find(Spinner)!.trigger('onBlur');
+      expect(spy).toHaveBeenCalled();
+    });
+
+    it('is not called when the input is blurred and focus moves to the Spinner', () => {
+      const spy = jest.fn();
+      const element = mountWithApp(
+        <TextField
+          label="TextField"
+          onBlur={spy}
+          onChange={noop}
+          type="number"
+          autoComplete="off"
+        />,
+      );
+      const relatedTarget = element.find(Spinner)!.domNode;
+
+      element.find('input')!.trigger('onBlur', {relatedTarget});
+      expect(spy).not.toHaveBeenCalled();
+    });
+
+    it('is not called when the Spinner is blurred and focus moves to the input', () => {
+      const spy = jest.fn();
+      const element = mountWithApp(
+        <TextField
+          label="TextField"
+          onBlur={spy}
+          onChange={noop}
+          type="number"
+          autoComplete="off"
+        />,
+      );
+      const relatedTarget = element.find('input')!.domNode;
+
+      element.find(Spinner)!.trigger('onBlur', {relatedTarget});
+      expect(spy).not.toHaveBeenCalled();
+    });
   });
 
   describe('id', () => {