setValue([]) does not clear the input field

[djolf]

Hi,

I'm using a controlled input with your InputOTP, and I have another button to clear the input, using setValue([]), but it does not work. When I console.log the value using useEffect, it shows [], but the numbers on the input is still there.

const [codeValue, setCodeValue] = useState<string[]>([]);

const clearCode = () => {
  setCodeValue([]);
}

useEffect(() => {
  console.log(codeValue);
}, [codeValue]);

return (
  <>
    <InputOTP onChange={setCodeValue} value={codeValue} />
    <Button type="link" danger onClick={clearCode} ><u>CLEAR CODE</u></Button>
  </>
)

[Ralfarios]

Hello, @djolf

Have you tried to match the array's length with the field's length? For example setCodeValue(['','','','','','']); maybe?

Cheers, R.

[djolf]

Hello, @Ralfarios

Yes, I tried that too. It doesn't work as well. The numbers are still showing even though the state value is empty. setCodeValue(['1','2','3','4','5','6']) only works when initializing with useState.

I did a workaround, by setting the InputOTP'skey prop to something else in clearCode(), so a completely new instance is created. But I'm pretty sure there's a bug regarding the values of the InputOTPSingle component.

[Ralfarios]

Hi, @djolf

Hmm, I see.. I will diagnose it and fix it ASAP.. In the meantime, you can use your technique to do a workaround until this problem solved.

Thanks for reporting the bug! 🙏 R.

[Ralfarios]

Hi @djolf ,

You might want to see V2.0.4 because the issue has been fixed.

Cheers, R.

[djolf]

Hi @Ralfarios,

Thanks for the quick fix.