fix(textfield): broken required validity on Safari

Fixes #4796 PiperOrigin-RevId: 564508324
material-components · Sep 12, 2023 · 89b30bd · 89b30bd
1 parent 61c8f6d
commit 89b30bd
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/checkbox/internal/checkbox.ts b/checkbox/internal/checkbox.ts
@@ -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('');

diff --git a/switch/internal/switch.ts b/switch/internal/switch.ts
@@ -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('');

diff --git a/textfield/internal/text-field.ts b/textfield/internal/text-field.ts
@@ -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('');