From a7c013a0562c82ff87d17da350ab6a4d759fa42c Mon Sep 17 00:00:00 2001
From: Daniel <info@danielvaladas.com>
Date: Sun, 29 Sep 2024 02:44:32 -0400
Subject: [PATCH] Fixed some issues to reset custom validity

Closes setCustomValidity("") does not remove the red border until blur #1176
---
 .../dnn-autocomplete/dnn-autocomplete.tsx     | 24 ++++++++++++++++---
 .../src/components/dnn-input/dnn-input.tsx    |  8 +++++++
 .../components/dnn-textarea/dnn-textarea.tsx  | 12 +++++++++-
 3 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/packages/stencil-library/src/components/dnn-autocomplete/dnn-autocomplete.tsx b/packages/stencil-library/src/components/dnn-autocomplete/dnn-autocomplete.tsx
index 1b646db80..44bafeb58 100644
--- a/packages/stencil-library/src/components/dnn-autocomplete/dnn-autocomplete.tsx
+++ b/packages/stencil-library/src/components/dnn-autocomplete/dnn-autocomplete.tsx
@@ -76,8 +76,16 @@ export class DnnAutocomplete {
   /** Can be used to set a custom validity message. */
   @Method()
   async setCustomValidity(message: string): Promise<void> {
-    this.customValidityMessage = message;
-    return this.inputField.setCustomValidity(message);
+    if (message == undefined || message == "") {
+      this.inputField.setCustomValidity("");
+      this.valid = true;
+      this.fieldset.setValidity(true);
+      return;
+    }
+
+    this.inputField.setCustomValidity(message);
+    this.valid = false;
+    this.fieldset.setValidity(false, message);
   }
 
   @State() focused = false;
@@ -109,6 +117,7 @@ export class DnnAutocomplete {
   private inputField!: HTMLInputElement;
   private suggestionsContainer: HTMLUListElement;
   private labelId: string;
+  private fieldset: HTMLDnnFieldsetElement;
   
   // eslint-disable-next-line @stencil-community/own-methods-must-be-private
   formResetCallback() {
@@ -298,6 +307,14 @@ export class DnnAutocomplete {
     }
   }
 
+  handleBlur(): void {
+    this.focused = false
+    var validity = this.inputField.checkValidity();
+    this.valid = validity;
+    this.fieldset.setValidity(validity, this.inputField.validationMessage);
+    this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);
+  }
+
   render() {
     return (
       <Host
@@ -306,6 +323,7 @@ export class DnnAutocomplete {
         onBlur={() => this.inputField.blur()}
       >
         <dnn-fieldset
+          ref={el => this.fieldset = el}
           invalid={!this.valid}
           focused={this.focused}
           label={`${this.label ?? ""}${this.required ? " *" : ""}`}
@@ -328,7 +346,7 @@ export class DnnAutocomplete {
               autoComplete="off"
               value={this.suggestions.length > 0 && this.selectedIndex != undefined ? this.suggestions[this.selectedIndex].label : this.value}
               onFocus={() => this.focused = true}
-              onBlur={() => this.focused = false}
+              onBlur={() => this.handleBlur()}
               onInput={e => this.handleInput(e)}
               onInvalid={() => this.handleInvalid()}
               onChange={() => this.handleChange()}
diff --git a/packages/stencil-library/src/components/dnn-input/dnn-input.tsx b/packages/stencil-library/src/components/dnn-input/dnn-input.tsx
index ffb3ca7da..4068c6343 100644
--- a/packages/stencil-library/src/components/dnn-input/dnn-input.tsx
+++ b/packages/stencil-library/src/components/dnn-input/dnn-input.tsx
@@ -86,7 +86,15 @@ export class DnnInput {
   /** Can be used to set a custom validity message. */
   @Method()
   async setCustomValidity(message: string): Promise<void> {
+    if (message == undefined || message == "") {
+      this.inputField.setCustomValidity("");
+      this.valid = true;
+      this.fieldset.setValidity(true);
+      return;
+    }
+
     this.inputField.setCustomValidity(message);
+    this.valid = false;
     this.fieldset.setValidity(false, message);
   }
   
diff --git a/packages/stencil-library/src/components/dnn-textarea/dnn-textarea.tsx b/packages/stencil-library/src/components/dnn-textarea/dnn-textarea.tsx
index 9b584459f..2d577a5cd 100644
--- a/packages/stencil-library/src/components/dnn-textarea/dnn-textarea.tsx
+++ b/packages/stencil-library/src/components/dnn-textarea/dnn-textarea.tsx
@@ -57,8 +57,16 @@ export class DnnTextarea {
   /** Can be used to set a custom validity message. */
   @Method()
   async setCustomValidity(message: string): Promise<void> {
+    if (message == undefined || message == "") {
+      this.textarea.setCustomValidity("");
+      this.valid = true;
+      this.fieldset.setValidity(true);
+      return;
+    }
+
     this.customValidityMessage = message;
-    return this.textarea.setCustomValidity(message);
+    this.valid = false;
+    this.textarea.setCustomValidity(message);
   }
 
   @State() focused = false;
@@ -68,6 +76,7 @@ export class DnnTextarea {
   @AttachInternals() internals: ElementInternals;
   
   private textarea: HTMLTextAreaElement;
+  private fieldset: HTMLDnnFieldsetElement;
   private labelId: string;
 
   componentWillLoad() {
@@ -126,6 +135,7 @@ export class DnnTextarea {
         onBlur={() => this.textarea.blur()}
       >
         <dnn-fieldset
+          ref={el => this.fieldset = el}
           invalid={!this.valid}
           focused={this.focused}
           resizable={this.resizable}