[TextField]: Enable proper focus when clicking the stepper

[ginabak]

WHY are these changes introduced?

(All the same issue just were multiple 😄 )
Fixes #7035
Fixes #7250
Fixes #7718
Resolves https://github.com/Shopify/inventory-states-ux/issues/654

📣 Hey reviewers, there are TWO commits I'd love your eyes on! 😄

COMMIT 1 approach

Changed the focus from the stepper to become the input in order to call the onBlur

For some reason, setting the Focus via the state (setFocus) in the child doesn't call the onBlur which caused all the issues seen above. Setting the focus directly on the input when using the stepper calls the onBlur, which fixes this.

COMMIT 2 approach

Doing the commit 1 approach meant that the focus was lost on the stepper, it actually didn't have any repercussions BUT this new approach just adds an onBlur down to the stepper (called Spinner 😕), which also solves this problem!

WHAT is this pull request doing?

BEFORE	AFTER

EXPAND TO SEE VIDEO BEFORE / AFTER BEHAVIOUR 📹

BEFORE

stepper.issue.in.prod.mp4

AFTER

With.changes.mp4

How to 🎩

Most recent storybook link

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React, {useCallback, useState} from 'react';

import {Page, TextField} from '../src';

export function Playground() {
  const [value, setValue] = useState('1');
  const [value1, setValue1] = useState('1');
  const [value2, setValue2] = useState('1');

  const handleChange = useCallback(
    (newValue: React.SetStateAction<string>) => setValue(newValue),
    [],
  );

  const handleChange1 = useCallback(
    (newValue: React.SetStateAction<string>) => setValue1(newValue),
    [],
  );

  const handleChange2 = useCallback(
    (newValue: React.SetStateAction<string>) => setValue2(newValue),
    [],
  );

  return (
    <Page title="Playground">
      <TextField
        label="Quantity"
        type="number"
        value={value}
        onChange={handleChange}
        autoComplete="off"
        align="left"
        labelHidden
      />
      <TextField
        label="Quantity"
        type="number"
        value={value1}
        onChange={handleChange1}
        autoComplete="off"
        align="left"
        labelHidden
        selectTextOnFocus
      />
      <TextField
        label="Quantity"
        type="number"
        value={value2}
        onChange={handleChange2}
        autoComplete="off"
        align="left"
        labelHidden
      />
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	215.08 KB (+0.01% 🔺)
polaris-react-esm	137.12 KB (+0.01% 🔺)
polaris-react-esnext	192.66 KB (+0.01% 🔺)
polaris-react-css	42.01 KB (0%)

[highfieldjames]

Thanks for fixing this Gina! Love the story to help tophat!

[voiid]

This makes me so happy

[ginabak]

📣 The Spinner component within TextField is the 🔼 and 🔽 when the type='number' not sure why it's called Spinner 😄 🤷🏽‍♀️ I'm currently making a PR to rename it to Stepper 😅

[highfieldjames]

Thanks for exploring this second approach! It's nice to no longer have the focus via the ref ❤️

[voiid]

Woooo

[thiagoloschi]

🎉 🎉 🎉 🎉 🎉 🎉 🎉 🎉

[gui-santos]

Looks good to me! Thx for this fix :)