Merge pull request #1182 from valadas/dnn-select-blur-validate

Fixed display of invalid on bluring dnn-select
DNNCommunity · Sep 29, 2024 · 2ea99a1 · 2ea99a1
2 parents a594e96 + e9af618
commit 2ea99a1
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/packages/stencil-library/src/components/dnn-select/dnn-select.tsx b/packages/stencil-library/src/components/dnn-select/dnn-select.tsx
@@ -127,6 +127,14 @@ export class DnnSelect {
     }
   }
 
+  private handleBlur(): void {
+    this.focused = false
+    var validity = this.select.checkValidity();
+    this.valid = validity;
+    this.fieldset.setValidity(validity, this.select.validationMessage);
+    this.internals.setValidity(this.select.validity, this.select.validationMessage);
+  }
+
   render() {
     return (
       <Host
@@ -147,7 +155,7 @@ export class DnnSelect {
             <select
               ref={el => this.select = el}
               onFocus={() => this.focused = true}
-              onBlur={() => this.focused = false}
+              onBlur={() => this.handleBlur()}
               onChange={e => this.handleChange((e.target as HTMLSelectElement).value)}
               onInvalid={() => this.handleInvalid()}
               required={this.required}
@@ -166,5 +174,4 @@ export class DnnSelect {
       </Host>
     );
   }
-
 }
diff --git a/packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.tsx b/packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.tsx
@@ -277,6 +277,7 @@ export class DnnExampleForm {
               <dnn-autocomplete
                 label="User"
                 helpText="Select a user"
+                required
                 suggestions={this.filteredUsers}
                 onSearchQueryChanged={e => {
                   if (e.detail == undefined || e.detail == "")