From e9af618d61014be900d229eaf87a4976fe4872e9 Mon Sep 17 00:00:00 2001
From: Daniel <info@danielvaladas.com>
Date: Sun, 29 Sep 2024 11:42:08 -0400
Subject: [PATCH] Fixed display of invalid on bluring dnn-select

Also fixes same for dnn-autocomplete.
Fixed dnn-select and dnn-autocomplete should validate upon blur #1175
---
 .../src/components/dnn-select/dnn-select.tsx          | 11 +++++++++--
 .../examples/dnn-example-form/dnn-example-form.tsx    |  1 +
 2 files changed, 10 insertions(+), 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
index 26e2b2aed..322c9f7d0 100644
--- 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
index b84711fb0..1bf5c8de0 100644
--- 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 == "")