Focus lost on every keystroke when placing a NumberInput inside a CardWrapper

[janniksam]

It seems like something is wrong with the CardWrapper. I'm a very fresh web development beginner (coming from the .NET World), so it probably is just me, but I found a very strange behavior:

This is working. It only rerenders the updated value-attribute to the DOM every time I enter a character into the NumberInput.

const Test= () => {
  const [limit, setLimit] = useState('0.0');
  return (
    <NumberInput
      minW="40%"
      maxW="40%"
      ml={5}
      clampValueOnBlur={false}
      defaultValue={0}
      precision={2}
      onChange={(enteredLimit) => setLimit(enteredLimit)}
      value={limit}
      step={0.2}
    >
      <NumberInputField />
    </NumberInput>
  );
};

This is NOT working. It rerenders the whole outer div every time I type a character into the number input, thus loosing the keyboardfocus every time I type a character into the NumberInput:

const Test = () => {
  const [limit, setLimit] = useState('0.0');
  return (
    <CardWrapper>
      <NumberInput
        minW="40%"
        maxW="40%"
        ml={5}
        clampValueOnBlur={false}
        defaultValue={0}
        precision={2}
        onChange={(enteredLimit) => setLimit(enteredLimit)}
        value={limit}
        step={0.2}
      >
        <NumberInputField />
      </NumberInput>
    </CardWrapper>
  );
};

I must be doing something terribly wrong. Do you have any idea, what could be wrong?

[juliancwirko]

Thanks for reporting. I will check it asap!

[juliancwirko]

Confirmed the bug, and it should already be fixed in v2.2.1

[janniksam]

I can indeed confirm it is fixed in v2.2.1. Thank you!