Required textfield do not apear red wen invalid is set

[rafalou38]

Required textfield do not apear red wen invalid is set

Describe the bug

If you mark a text field as required and programmatically set it to be invalid it doesn't become red.

To Reproduce

1. mark a Text Field as required
2. add a way to change its invalid property
3. text field doesn't become red until you click it

example code:

<script>
	import Switch from '@smui/switch';
	import Textfield from '@smui/textfield';
	import FormField from '@smui/form-field';

	let error = false;
	let value = 'test';
</script>

<h4>with required</h4>
<Textfield bind:value label="Password" invalid={error} required />
<br /><br />
<Textfield bind:value label="Password" invalid={error} required variant="filled" />
<br /><br /><br />
<h4>without required</h4>
<Textfield bind:value label="Password" invalid={error} />
<br /><br />
<Textfield bind:value label="Password" invalid={error} variant="filled" />
<br /><br /><br /><br />

<FormField align="end">
	<span slot="label">invalid</span>
	<Switch bind:checked={error} />
</FormField>

Expected behavior

Text Field should be red when invalid

Screenshots

Desktop:

• OS: Windows
• Browser: Firefox
• Version: 90.0a1

repl

[hperrin]

Wow! Very impressive bug report! Thank you for the sample code. It's making it much easier to fix.