search

hperrin / svelte-material-ui

Svelte Material UI Components
https://sveltematerialui.com/
Apache License 2.0
3.27k stars 287 forks source link

Unable to dynamically set Select field to invalid #632

Closed melijimenez11 closed 6 months ago

melijimenez11 commented 8 months ago

Describe the bug I'm trying to set a Select component to invalid, dynamically, when there are form errors in the page. But the documentation isn't clear at all about how to do this. If I hardcode the attribute invalid into the component, or I set invalid=true it works. The Select field looks invalid as expected then. But it doesn't work dynamically by setting invalid={validationFunction} or invalid={booleanIsValidVar} during form validation

To Reproduce Steps to reproduce the behavior: See the following REPL code and copy it in your project https://svelte.dev/repl/7db777a3d20649a497d66d160cf3bb2f?version=4.2.1

Expected behavior When invalid is set to true during runtime (form validation), the field should be styled to be invalid.

hperrin commented 6 months ago

When you don't want the Select component to update invalid automatically, you can set updateInvalid={false}. That will let you update the invalid prop dynamically.

hperrin commented 6 months ago

I added a demo on the website for this feature.