Fixed some issues to reset custom validity

Closes setCustomValidity("") does not remove the red border until blur #1176
DNNCommunity · Sep 29, 2024 · a7c013a · a7c013a
1 parent 6ae8b41
commit a7c013a
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 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
@@ -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
@@ -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
@@ -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}