material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-10-26 21:56:56 +03:00
Code Issues Projects Releases Wiki Activity

fix(textfield): broken required validity on Safari

Browse Source 
Fixes #4796

PiperOrigin-RevId: 564562802
This commit is contained in:
Elizabeth Mitchell 2023-09-11 18:39:20 -07:00 committed by Copybara-Service
parent 61c8f6db46
commit c26a578448
3 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
checkbox/internal/checkbox.ts
View File

@ -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('');

6
switch/internal/switch.ts
View File

@ -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('');

6
textfield/internal/text-field.ts
View File

@ -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('');