dnn-autocomplete, allow showing suggestions upon click

Closes dnn-autocomplete, dropdown should show selections #1180
DNNCommunity · Sep 30, 2024 · 8e095f3 · 8e095f3
1 parent e9af618
commit 8e095f3
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 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
@@ -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
@@ -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 =>