mirror of
https://github.com/material-components/material-web.git
synced 2024-10-26 21:56:56 +03:00
fix(textfield): broken required validity on Safari
Fixes #4796 PiperOrigin-RevId: 564562802
This commit is contained in:
parent
61c8f6db46
commit
c26a578448
@ -127,6 +127,9 @@ export class Checkbox extends LitElement {
|
||||
@state() private prevDisabled = false;
|
||||
@state() private prevIndeterminate = false;
|
||||
@query('input') private readonly input!: HTMLInputElement|null;
|
||||
// Needed for Safari, see https://bugs.webkit.org/show_bug.cgi?id=261432
|
||||
// Replace with this.internals.validity.customError when resolved.
|
||||
private hasCustomValidityError = false;
|
||||
private readonly internals =
|
||||
(this as HTMLElement /* needed for closure */).attachInternals();
|
||||
|
||||
@ -188,6 +191,7 @@ export class Checkbox extends LitElement {
|
||||
* @param error The error message to display.
|
||||
*/
|
||||
setCustomValidity(error: string) {
|
||||
this.hasCustomValidityError = !!error;
|
||||
this.internals.setValidity({customError: !!error}, error, this.getInput());
|
||||
}
|
||||
|
||||
@ -273,7 +277,7 @@ export class Checkbox extends LitElement {
|
||||
// Sync the internal <input>'s validity and the host's ElementInternals
|
||||
// validity. We do this to re-use native `<input>` validation messages.
|
||||
const input = this.getInput();
|
||||
if (this.internals.validity.customError) {
|
||||
if (this.hasCustomValidityError) {
|
||||
input.setCustomValidity(this.internals.validationMessage);
|
||||
} else {
|
||||
input.setCustomValidity('');
|
||||
|
@ -129,6 +129,9 @@ export class Switch extends LitElement {
|
||||
}
|
||||
|
||||
@query('input') private readonly input!: HTMLInputElement|null;
|
||||
// Needed for Safari, see https://bugs.webkit.org/show_bug.cgi?id=261432
|
||||
// Replace with this.internals.validity.customError when resolved.
|
||||
private hasCustomValidityError = false;
|
||||
private readonly internals =
|
||||
(this as HTMLElement /* needed for closure */).attachInternals();
|
||||
|
||||
@ -190,6 +193,7 @@ export class Switch extends LitElement {
|
||||
* @param error The error message to display.
|
||||
*/
|
||||
setCustomValidity(error: string) {
|
||||
this.hasCustomValidityError = !!error;
|
||||
this.internals.setValidity({customError: !!error}, error, this.getInput());
|
||||
}
|
||||
|
||||
@ -303,7 +307,7 @@ export class Switch extends LitElement {
|
||||
// Sync the internal <input>'s validity and the host's ElementInternals
|
||||
// validity. We do this to re-use native `<input>` validation messages.
|
||||
const input = this.getInput();
|
||||
if (this.internals.validity.customError) {
|
||||
if (this.hasCustomValidityError) {
|
||||
input.setCustomValidity(this.internals.validationMessage);
|
||||
} else {
|
||||
input.setCustomValidity('');
|
||||
|
@ -347,6 +347,9 @@ export abstract class TextField extends LitElement {
|
||||
private readonly leadingIcons!: Element[];
|
||||
@queryAssignedElements({slot: 'trailing-icon'})
|
||||
private readonly trailingIcons!: Element[];
|
||||
// Needed for Safari, see https://bugs.webkit.org/show_bug.cgi?id=261432
|
||||
// Replace with this.internals.validity.customError when resolved.
|
||||
private hasCustomValidityError = false;
|
||||
private readonly internals =
|
||||
(this as HTMLElement /* needed for closure */).attachInternals();
|
||||
|
||||
@ -426,6 +429,7 @@ export abstract class TextField extends LitElement {
|
||||
* @param error The error message to display.
|
||||
*/
|
||||
setCustomValidity(error: string) {
|
||||
this.hasCustomValidityError = !!error;
|
||||
this.internals.setValidity(
|
||||
{customError: !!error}, error, this.getInputOrTextarea());
|
||||
}
|
||||
@ -750,7 +754,7 @@ export abstract class TextField extends LitElement {
|
||||
// Sync the internal <input>'s validity and the host's ElementInternals
|
||||
// validity. We do this to re-use native `<input>` validation messages.
|
||||
const input = this.getInputOrTextarea();
|
||||
if (this.internals.validity.customError) {
|
||||
if (this.hasCustomValidityError) {
|
||||
input.setCustomValidity(this.internals.validationMessage);
|
||||
} else {
|
||||
input.setCustomValidity('');
|
||||
|
Loading…
Reference in New Issue
Block a user