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

[zaquille-oneil]

WHY are these changes introduced?

Fixes #10948

WHAT is this pull request doing?

Prevent onBlur in TextField from triggering when moving focus between the <input /> and <Spinner /> child elements within a <TextField />

How to 🎩

Spin HQ

• web checked out on ZL/quantity-price-break-minimum-quantity-fix
• polaris checked out on this PR's branch (ZL/text-field-blur)

Tophat steps:

• Observe the buggy behavior here: https://github.com/Shopify/polaris/assets/4310197/f298a261-76ca-452b-b9f0-984d789bcd26
• Go to the CatalogEditor for a given Catalog
• Open the QuantitySettingsModal by hovering over a row in the table and clicking in the column underneath "Quantity rules"
• Test against the behavior in the buggy video linked above
  • note: the expected onBlur behavior that should occur when manipulating the "Increment" TextField:
    • "Minimum" value "snaps" (adjusts) to match the minimum behavior
    • any relevant "snap" messages should appear below
  • verify that subsequent increases to the "Increment" value via the <Spinner /> does not trigger onBlur logic to occur UNTIL the user blurs off of the entire TextField component
  • verify that changes to "Increment" TextField value via the <input /> does not trigger onBlur logic to occur UNTIL the user blurs off the entire TextField component
    • e.g. set input value to "5", then, without blurring off the "Increment" TextField, click the up arrow to bump the value to "6". this should not trigger any onBlur logic

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

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

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </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

[chloerice]

Thanks for catching this @zaquille-oneil! You'll just need to add a changeset and then this is good to go.

[stefanlegg]

LGTM, nice job! +1 to @chloerice's suggested change before merging

[zaquille-oneil]

I spoke with @highfieldjames about how these changes may affect sections/Inventory, specifically the InventoryListPage in the EditableQuantityCell component.

In this Polaris PR, I changed the behaviour of TextFields to match the default behaviour of which is to focus the input after clicking a spinner
When tophatting your PR on the inventory list page, hitting the enter key after clicking the spinner no longer submits the form. This is something we need to keep the behaviour of.

James suggested a change:

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

I’ve just spun up a new instance to see what’s going on exactly, and returning only after setFocus has been called would allow the form submission to work as expected (not sure why though…). Does this still fix the issue you are trying to fix?

so my next step will be to make sure that this doesn't affect behavior on the Catalogs side. Will keep this thread up-to-date

[highfieldjames]

All looks good for inventory adjustments! Thanks Zak! 🚀