<s-number-field> stepper does not register consecutive clicks

Polaris
,
1

I am creating a form for product returns, and it has a number stepper for customers to select how many of each product they wish to return. The value does not change if the user clicks the same Increase or Decrease button more than once consecutively however.
For example, if a customer bought 5 apples, 5 oranges, and 5 bananas, and they want to return the apples and 2 oranges, they will see this:
Apples 5 - +
Oranges 2 - +
Bananas 0 - +
but the values I get are apples: 1 and oranges: 1, because it only registers the first click.
HOWEVER! If they increase Apples up to 4, and then increase oranges, and then click to increase Apples to 5, I will get Apples: 4, because it got a “new” click.

I’ve tried onClick, onInput, and querying the number directly but nothing works. I can’t find much talk about the s-number-field except a few post from several years ago saying it was broken. Is it still completely busted?

2

@Spewy we’ve also received complaints from merchants about this in our full-page customer account UI extension; I thought it might be an issue with our specific scenario because it’s quite complex (number field with stepper in a modal with a bunch of surrounding logic etc.), so I made the simplest reproduction I could to test that assumption, and found that the bug exists even in that scenario. For the Shopifolks’ ease of debugging and fixing this, that repro is:

import { render } from 'preact';
import { useCallback, useState } from 'preact/hooks';

const TestApp = () => {
  const [value, setValue] = useState<number>();
    const handleChange = useCallback((value: number | undefined) => {
      console.log(`handleChange: ${value}`);
      setValue(value);
    }, [setValue]);
  
    return (
      <s-number-field
        label="Number field"
        min={100}
        max={1000}
        step={100}
        controls="stepper"
        value={value?.toString()}
        onChange={({ currentTarget }) => {
          if (!currentTarget) return;
          const { value: newValue } =
            currentTarget as HTMLElementTagNameMap['s-number-field'];
          handleChange(newValue === '' ? undefined : Number(newValue));
        }}
        required
      />
    );
}

export default function Test() {
  render(<TestApp />, document.body);
};

Running this shows very clearly that press events on the stepper’s buttons aren’t forwarded to the extension after the first press, though that behaviour resets if the value is changed via some other means (e.g. typing into the input or using the up/down arrow keys):

Interestingly, we have the same number field on a checkout UI extension and that behaves just fine, so it seems like this bug doesn’t exist across all surfaces.

Hopefully Shopify get on this ASAP; i the meantime, we’re left with some of the core functionality in what’s meant to be our flagship customer-facing offering looking broken, with nothing we can do about it except compromise our functionality so we stop getting reports of a bug that’s out of our hands :grimacing:

3

Having the same issue… any workaround for this?

4

@Spewy @AndyPye a hacky solution I found was to use onInput instead of onChange