Previously all text fields would focus themselves when the form reports validity, meaning the last one got focus. In reality, reportValidity is supposed to focus the first invalid control.
I added a "call" method wrapper around the `onReportValidity` callback that handles focusing logic.
PiperOrigin-RevId: 597904790
The bug: given a form with two required text fields,
1. Try to submit the form, both fields show error.
2. Add a value to the first field.
3. Try to submit the form, the first field does not remove its error.
This is fixed by listening to form submits and clearing the error state if the control is valid.
I refactored `injectFormReportValidityHooks()` into `addFormReportValidListener()` to keep the `OnReportValidity` class cleaner and better identify the problem we're trying to solve.
PiperOrigin-RevId: 597664564
Fixes#4998
This also fixes an error being thrown in text field's validator when minlength/maxlength change to out of bounds if they're not set in the correct order.
PiperOrigin-RevId: 594013553
There is out-of-sync state when lit's built-in accessor tries to reflect attributes alongside the getter and setter. Instead, the properties just read from attributes and requestUpdate is called when those attributes change.
PiperOrigin-RevId: 590710159
Cards often have content that extends to the bounds of the card. Instead of adding default padding that must be removed, cards' content should add their own padding as needed.
This makes adding full-width media and dividers easier.
Also moved background z-indices to -1 since the slot doesn't have a display and the z-index wasn't doing anything.
PiperOrigin-RevId: 587883362
On construction, setting `tabIndex = 0` should hydrate a tabindex attribute. This behavior was lost since we overrode `Element.prototype.tabIndex`. This change keeps the platform getter/setter behavior and calls requestUpdate another way.
PiperOrigin-RevId: 586738747
This is needed specifically for text fields. There appears to be an odd Chrome/Safari issue where an element that `delegatesFocus: true` to an inner `<input>` MUST provide that input as the validity anchor. Otherwise, when a form submits or calls `form.reportValidity()`, an error will be thrown.
See https://lit.dev/playground/#gist=6c26e418e0010f7a5aac15005cde8bde for a reproduction.
Unfortunately I couldn't programmatically trigger this behavior in a jasmine test.
PiperOrigin-RevId: 586723140
This reduces the copy/paste of validation code. Constraint validation must be synchronous, so a `Validator` helps compute the validity and cache it since the validity must be checked when properties change.
Implemented in checkbox-like controls.
PiperOrigin-RevId: 584380464
Part of adding constraint validation mixins. Each component that participates in constraint validation has different rules and error messages for validating. The `Validator` gives `mixinConstraintValidation()` a way to compute and cache validation.
Other validators will be added later, such as `SelectValidator` and `RadioValidator`
PiperOrigin-RevId: 583508468
BREAKING CHANGE: Rename `@material/web/<component>/lib` to `@material/web/<component>/internal`. Prefer not using internal files.
PiperOrigin-RevId: 550633216
