feat: use DMenu for filter tips

discourse · martin-brennan · Aug 5, 2025 · Jul 27, 2025 · Jul 27, 2025 · Jul 27, 2025
commit d3d0ef2d7f68a4a388ea1155fe28415687990d7b
diff --git a/app/assets/javascripts/discourse/app/components/discovery/filter-tips.gjs b/app/assets/javascripts/discourse/app/components/discovery/filter-tips.gjs
@@ -7,10 +7,12 @@ import { cancel, later, next } from "@ember/runloop";
 import { service } from "@ember/service";
 import { and, eq } from "truth-helpers";
 import DButton from "discourse/components/d-button";
+import DropdownMenu from "discourse/components/dropdown-menu";
 import concatClass from "discourse/helpers/concat-class";
 import { ajax } from "discourse/lib/ajax";
 import discourseDebounce from "discourse/lib/debounce";
 import { i18n } from "discourse-i18n";
+import DMenu from "float-kit/components/d-menu";
 
 const MAX_RESULTS = 20;
 
@@ -22,6 +24,8 @@ export default class FilterTips extends Component {
   @tracked currentInputValue = "";
   @tracked searchResults = [];
 
+  dMenu = null;
+
   activeFilter = null;
   searchTimer = null;
   handleBlurTimer = null;
@@ -45,6 +49,8 @@ export default class FilterTips extends Component {
       this.inputElement.removeEventListener("keydown", this.handleKeyDown);
       this.inputElement.removeEventListener("input", this.handleInput);
     }
+
+    this.dMenu?.destroy();
   }
 
   get selectedIndex() {
@@ -385,6 +391,15 @@ export default class FilterTips extends Component {
     this.inputElement.addEventListener("input", this.handleInput);
   }
 
+  @action
+  onRegisterApi(api) {
+    this.dMenu = api;
+    if (this.args.inputElement) {
+      this.dMenu.trigger = this.args.inputElement;
+      this.dMenu.detachedTrigger = true;
+    }
+  }
+
   @action
   handleInput() {
     this.currentInputValue = this.inputElement.value;
@@ -429,6 +444,7 @@ export default class FilterTips extends Component {
     this.currentInputValue = this.inputElement.value;
     this.showTips = true;
     this.selectedIndex = -1;
+    this.dMenu?.show();
   }
 
   @action
@@ -499,6 +515,7 @@ export default class FilterTips extends Component {
 
   hideTips() {
     this.showTips = false;
+    this.dMenu?.close();
     this.args.blockEnterSubmit(false);
   }
 
@@ -563,26 +580,37 @@ export default class FilterTips extends Component {
   }
 
   <template>
-    <div class="filter-tips" {{didInsert this.setupEventListeners}}>
-      {{#if (and this.showTips this.currentItems.length)}}
-        <div class="filter-tips__dropdown">
-          {{#each this.currentItems as |item index|}}
-            <DButton
-              class={{concatClass
-                "filter-tip__button"
-                (if (eq index this.selectedIndex) "filter-tip__selected")
-              }}
-              @action={{fn this.selectItem item}}
-            >
-              <span class="filter-tip__name">{{item.name}}</span>
-              {{#if item.description}}
-                <span class="filter-tip__description">—
-                  {{item.description}}</span>
-              {{/if}}
-            </DButton>
-          {{/each}}
-        </div>
-      {{/if}}
-    </div>
+    <DMenu
+      class="filter-tips"
+      @triggerComponent={{element "div"}}
+      @onRegisterApi={{this.onRegisterApi}}
+      @contentClass="filter-tips__dropdown"
+      {{didInsert this.setupEventListeners}}
+    >
+      <:trigger></:trigger>
+      <:content>
+        {{#if (and this.showTips this.currentItems.length)}}
+          <DropdownMenu as |dropdown|>
+            {{#each this.currentItems as |item index|}}
+              <dropdown.item>
+                <DButton
+                  class={{concatClass
+                    "filter-tip__button"
+                    (if (eq index this.selectedIndex) "filter-tip__selected")
+                  }}
+                  @action={{fn this.selectItem item}}
+                >
+                  <span class="filter-tip__name">{{item.name}}</span>
+                  {{#if item.description}}
+                    <span class="filter-tip__description">—
+                      {{item.description}}</span>
+                  {{/if}}
+                </DButton>
+              </dropdown.item>
+            {{/each}}
+          </DropdownMenu>
+        {{/if}}
+      </:content>
+    </DMenu>
   </template>
 }
diff --git a/app/assets/stylesheets/common/components/filter-tips.scss b/app/assets/stylesheets/common/components/filter-tips.scss
@@ -1,20 +1,9 @@
-.filter-tips {
-  position: relative;
 
+.filter-tips {
   &__dropdown {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    background: var(--secondary);
-    border: 1px solid var(--primary-low);
-    border-radius: var(--d-border-radius);
-    box-shadow: var(--shadow-dropdown);
-    z-index: z("dropdown") + 1;
-    margin-top: 0.25em;
     max-height: 300px;
     overflow-y: auto;
-
+    
     .filter-tip__button {
       display: block;
       width: 100%;