[TextField] Allow click event on spinner (stepper in number type)

[ginabak]

co-author: @weslleyaraujo

WHY are these changes introduced?

Fixes #6725
Part of https://github.com/Shopify/inventory-states-ux/issues/524
Follow up to #6129 https://github.com/Shopify/web/pull/68974

As of Polaris 9.12.0, we no longer bubble up click events emitted on TextField and parent elements can no longer depend on interactions. This change was introduced here.

Click events do not bubble for the Spinner(see here) portion of the Textfield. The spinner is the 🔼 and 🔽 when the type='number'. This is problematic for when we need to implement onClick events around the TextField. This current monorail schema measures whether or not a merchant used the stepper / spinner to adjust their inventory quantity. The event.stopPropagation() no longer allows us to capture this data 😢 and will always return false.

WHAT is this pull request doing?

This PR will conditionally call stopPropagation when click events are captured by TextField and parent elements.

If it is either the spinner or an input, it will no longer call the stopPropagation.

BEFORE

stepper.click.not.propagated.mp4

AFTER

propagation.works.mp4

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

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

import React from 'react';

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

export function Playground() {
  return (
    <Page title="Playground">
      <Stack vertical>
        <div
          onClick={(event) =>
            console.log('Propagated event for the stepper / Spinner', event)
          }
        >
          <TextField
            label="Working Stepper Event"
            autoComplete="off"
            type="number"
          />
        </div>
        <div
          onClick={(event) =>
            console.log('Propagated event / verticalContent', event)
          }
        >
          <TextField
            label="Vertical Content"
            autoComplete="off"
            verticalContent={<Badge>Buyer</Badge>}
          />
        </div>
      </Stack>
    </Page>
  );
}

There should be two TextFields rendered in your playground and one of them contains a Badge as its verticalContent prop.

• Open your console and click the spinner on the first TextField
• You should see a log indicating that the click event bubbled up to its parent 🥳
• On the second TextField click directly on the Badge (not the input field)
• You should not see any logs indicating that the click event bubbled up (unless you clicked on the input field)

🎩 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	198.29 KB (+0.02% 🔺)
polaris-react-esm	133.18 KB (+0.03% 🔺)
polaris-react-esnext	188.33 KB (+0.02% 🔺)
polaris-react-css	41.75 KB (0%)

[ginabak]

I just moved these functions to be alphabetical so it's easier to read/find. It shouldn't affect the git blame if I'm not mistaken? 🤞🏽

[ginabak]

/snapit

[github-actions]

🫰✨ Thanks @ginabak! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-icons@0.0.0-snapshot-release-20220725143855

yarn add @shopify/polaris@0.0.0-snapshot-release-20220725143855

[ginabak]

spinner (so confusing, I know), is not the actual "loading" spinner, it's this component that has a confusing name, which is the 🔼 and the 🔽 (the stepper) portion of the TextField.

[weslleyaraujo]

awesome! Nice to see this one coming together 🙂

[LauraAubin]

🎩 and code looks great!

[chloerice]

Hey @ginabak 👋🏽 Thanks for raising this! I think you will need to also add isSpinner to the conditional on line 581 in the handleClick method to prevent the input focus toggle/flash with each click of the spinner.

[ginabak]

Hi hi @chloerice ! GOOD CATCH, OMG! Thank-you! 😄 !

[chloerice]

🚀