SOLVED: Component fails on second key pressing in the last input field

[mvarakin]

Hi there,

[For solution please see below]

here is part of my code

...
const [code, setCode] = useState('');
const onChange = (code) => {
setCode(code)
}
...

  <ReactCodeInput
    key={1}
    type="number"
    fields={4}
    name="name"
    disabled={false}
    onChange={onChange}
    style={{ width: 212 }}
    inputStyle={{ width: 44, fontSize: '1.5em' }}
  />

It renders 4 fields as supposed to.

When I type four numbers everything goes well - onChange invokes, code changes.

But when I press any keyboard key in the last input field once more I always got the following error
(it happens also if you start to type from the last field and just press key twice)

Uncaught TypeError: Cannot assign to read only property 'display' of object '#<Object>'
at Function.assign (<anonymous>)
at t.value (ReactCodeInput.js:271)

Also this error occurs even on 1st key press if I change onChange to
const onChange = (code) => null

SOLUTION

this prop
style={{ width: 212 }}
caused the above error

I removed it and everything worked fine

Hopefully the author fix it

Best regards..

[40818419]

@mvarakin please create pr if you think it should be in codebase

[marefati110]

same problem

its look like happening when use the style prop.