search

hperrin / svelte-material-ui

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

Unable to dynamically set Select field to invalid #632

Closed melijimenez11 closed 11 months ago

melijimenez11 commented 1 year 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 11 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 11 months ago

I added a demo on the website for this feature.