POS NumberField inconsistently calling onChange

Extensions
1

I’ve been running into issues with the NumberField component. Everything works fine when you simply use <NumberField value={value} onChange={setValue} />, but the moment you don’t set the state to exactly what was inputted it breaks.

Take this example:

<NumberField
  label="Quantity"
  inputMode="numeric"
  value={val}
  onChange={num => {
    console.log('onChange', num);
    if (!num) {
      setVal(num);
      return;
    }

    const parsed = Number(num);

    if (parsed > 10) {
      setVal('10');
      return;
    }

    setVal(num);
  }}
  max={10}
  required
/>

After entering e.g. 12 it correctly snaps back to 10, but further inputs do not cause a call to onChange. It seems like using onInput would work here, but I would prefer not doing that as the docs explicitly state not to.

I’ve also noticed that onChange is never called again after the value has been set to undefined

Hope this can be fixed, thanks.

2

Hi Tim,

Thank you for bringing this to our attention. I am able to reproduce the issue on our end, and have logged it as a bug for us to fix.

Edit: The bug stems from a queueing mechanism we have between the POS and the extension. If you try to set the same value twice, the queueing mechanism does not detect a change and thus short-circuits the process. To work around this, you can briefly set the value of the NumberField to a different value. I understand this is not ideal and produces a flicker, but it does keep the NumberField responsive. Basically, I’d recommend doing:

    if (parsed > 10) {
      setVal('0');
      setVal('10');
      return;
    }

Thank you,
Nathan O

3

Thank you for the work around Nathan!