From 76c1ff27c0d58d50650680210bb9344603002a24 Mon Sep 17 00:00:00 2001
From: Elliott Marquez <emarquez@google.com>
Date: Fri, 20 Oct 2023 16:52:23 -0700
Subject: [PATCH] fix(select,textfield): native form validation shows error
 state

PiperOrigin-RevId: 575349644
---
 select/internal/select.ts        | 34 ++++++++++++++++++++++++++++++--
 textfield/internal/text-field.ts | 30 +++++++++++++++++++++++++++-
 2 files changed, 61 insertions(+), 3 deletions(-)

diff --git a/select/internal/select.ts b/select/internal/select.ts
index 937ec628a52..9a4b3b30aed 100644
--- a/select/internal/select.ts
+++ b/select/internal/select.ts
@@ -258,6 +258,8 @@ export abstract class Select extends LitElement {
   @query('#label') private readonly labelEl!: HTMLElement;
   @queryAssignedElements({slot: 'leading-icon', flatten: true})
   private readonly leadingIcons!: Element[];
+  private isCheckingValidity = false;
+  private isReportingValidity = false;
   private customValidationMessage = '';
   private readonly internals =
       (this as HTMLElement /* needed for closure */).attachInternals();
@@ -308,8 +310,11 @@ export abstract class Select extends LitElement {
    * @return true if the select is valid, or false if not.
    */
   checkValidity() {
+    this.isCheckingValidity = true;
     this.syncValidity();
-    return this.internals.checkValidity();
+    const isValid = this.internals.checkValidity();
+    this.isCheckingValidity = false;
+    return isValid;
   }
 
   /**
@@ -329,12 +334,21 @@ export abstract class Select extends LitElement {
    * @return true if the select is valid, or false if not.
    */
   reportValidity() {
+    this.isReportingValidity = true;
     let invalidEvent: Event|undefined;
     this.addEventListener('invalid', event => {
       invalidEvent = event;
     }, {once: true});
 
     const valid = this.checkValidity();
+    this.showErrorMessage(valid, invalidEvent);
+
+    this.isReportingValidity = false;
+
+    return valid;
+  }
+
+  private showErrorMessage(valid: boolean, invalidEvent: Event|undefined) {
     if (invalidEvent?.defaultPrevented) {
       return valid;
     }
@@ -801,7 +815,9 @@ export abstract class Select extends LitElement {
     const validationMessage = this.customValidationMessage ||
         valueMissing && this.getRequiredValidationMessage() || '';
 
-    this.internals.setValidity({valueMissing, customError}, validationMessage);
+    this.internals.setValidity(
+        {valueMissing, customError}, validationMessage,
+        this.field ?? undefined);
   }
 
   // Returns the platform `<select>` validation message for i18n.
@@ -811,6 +827,20 @@ export abstract class Select extends LitElement {
     return select.validationMessage;
   }
 
+  override connectedCallback() {
+    super.connectedCallback();
+
+    // Handles the case where the user submits the form and native validation
+    // error pops up. We want the error styles to show.
+    this.addEventListener('invalid', (invalidEvent: Event) => {
+      if (this.isCheckingValidity || this.isReportingValidity) {
+        return;
+      }
+
+      this.showErrorMessage(false, invalidEvent);
+    });
+  }
+
   /** @private */
   formResetCallback() {
     this.reset();
diff --git a/textfield/internal/text-field.ts b/textfield/internal/text-field.ts
index dca32186109..d0eeb3a1ce9 100644
--- a/textfield/internal/text-field.ts
+++ b/textfield/internal/text-field.ts
@@ -355,6 +355,8 @@ export abstract class TextField extends LitElement {
   private readonly leadingIcons!: Element[];
   @queryAssignedElements({slot: 'trailing-icon'})
   private readonly trailingIcons!: Element[];
+  private isCheckingValidity = false;
+  private isReportingValidity = false;
   // Needed for Safari, see https://bugs.webkit.org/show_bug.cgi?id=261432
   // Replace with this.internals.validity.customError when resolved.
   private hasCustomValidityError = false;
@@ -372,8 +374,11 @@ export abstract class TextField extends LitElement {
    * @return true if the text field is valid, or false if not.
    */
   checkValidity() {
+    this.isCheckingValidity = true;
     this.syncValidity();
-    return this.internals.checkValidity();
+    const isValid = this.internals.checkValidity();
+    this.isCheckingValidity = false;
+    return isValid;
   }
 
   /**
@@ -395,12 +400,21 @@ export abstract class TextField extends LitElement {
    * @return true if the text field is valid, or false if not.
    */
   reportValidity() {
+    this.isReportingValidity = true;
     let invalidEvent: Event|undefined;
     this.addEventListener('invalid', event => {
       invalidEvent = event;
     }, {once: true});
 
     const valid = this.checkValidity();
+    this.showErrorMessage(valid, invalidEvent);
+
+    this.isReportingValidity = false;
+
+    return valid;
+  }
+
+  private showErrorMessage(valid: boolean, invalidEvent: Event|undefined) {
     if (invalidEvent?.defaultPrevented) {
       return valid;
     }
@@ -778,6 +792,20 @@ export abstract class TextField extends LitElement {
     this.hasTrailingIcon = this.trailingIcons.length > 0;
   }
 
+  override connectedCallback() {
+    super.connectedCallback();
+
+    // Handles the case where the user submits the form and native validation
+    // error pops up. We want the error styles to show.
+    this.addEventListener('invalid', (invalidEvent: Event) => {
+      if (this.isCheckingValidity || this.isReportingValidity) {
+        return;
+      }
+
+      this.showErrorMessage(false, invalidEvent);
+    });
+  }
+
   /** @private */
   formResetCallback() {
     this.reset();