Skip to content
This repository has been archived by the owner on Apr 1, 2023. It is now read-only.

Input component invalid prop is not passed to input element correctly #74

Open
rienst opened this issue Apr 21, 2022 · 0 comments
Open

Comments

@rienst
Copy link

rienst commented Apr 21, 2022

I received the following error...

Warning: Received `false` for a non-boolean attribute `invalid`.
If you want to write it to the DOM, pass a string instead: invalid="false" or invalid={value.toString()}.
If you used to conditionally omit it with invalid={condition && value}, pass invalid={condition ? value : undefined} instead.

...when applying this invalid prop:

<Input invalid={hasError} /> // hasError === false

I suppose the component should turn this boolean into a 'true' or 'false' string.


Edit: a workaround is using the aria-invalid prop as it is also gets styled properly:

<Input aria-invalid={hasError} /> // hasError === false
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
1 participant