From 8e095f326c47499fd14777a52dbedda85f2cc9eb Mon Sep 17 00:00:00 2001
From: Daniel <info@danielvaladas.com>
Date: Sun, 29 Sep 2024 21:51:41 -0400
Subject: [PATCH] dnn-autocomplete, allow showing suggestions upon click

Closes dnn-autocomplete, dropdown should show selections #1180
---
 .../src/components/dnn-autocomplete/dnn-autocomplete.tsx   | 6 +++++-
 .../examples/dnn-example-form/dnn-example-form.tsx         | 7 +------
 2 files changed, 6 insertions(+), 7 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 44bafeb58..a0a2a12df 100644
--- a/packages/stencil-library/src/components/dnn-autocomplete/dnn-autocomplete.tsx
+++ b/packages/stencil-library/src/components/dnn-autocomplete/dnn-autocomplete.tsx
@@ -253,6 +253,10 @@ export class DnnAutocomplete {
     return itemHeight * upcomingItems;
   }
 
+  private handleDropdownClick(): void {
+    this.handleSearchQueryChanged(this.value);
+  }
+
   @Debounce(100)
   private handleSuggestionsScroll(): void {
     const container = this.suggestionsContainer;
@@ -380,7 +384,7 @@ export class DnnAutocomplete {
               }
             </ul>
             <svg
-              onClick={() => this.focused = !this.focused}
+              onClick={() => this.handleDropdownClick()}
               class="chevron-down"
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 -960 960 960">
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 1bf5c8de0..084b54634 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
@@ -280,12 +280,7 @@ export class DnnExampleForm {
                 required
                 suggestions={this.filteredUsers}
                 onSearchQueryChanged={e => {
-                  if (e.detail == undefined || e.detail == "")
-                  {
-                    this.filteredUsers = [];
-                    return;
-                  }
-                  const search = (e.detail as string).toLowerCase();
+                  const search = (e.detail || "" as string).toLowerCase();
                   this.filteredUsers = this.users.filter(u => u.label.toLowerCase().includes(search));
                 }}
                 renderSuggestion={suggestion =>