DEV: adds matchTriggerWidth/matchTriggerMinWidth d-menu (#34128)

jjaffeux · martin-brennan · pento · commit 54dc4ca7a8e3 · 2025-08-11T11:27:59.000+10:00
The `@matchTriggerWidth` and `@matchTriggerMinWidth` options have been added on `<DMenu />` to give more control on the size of the content. They will allow to respectively set the width and minWidth of the content. This is useful if you want your trigger to have the same width than your content for example. It defaults to false. Usage: ```gjs <DMenu @Label="a long label" @matchTriggerWidth={{true}}>content</DMenu> <DMenu @Label="a long label" @matchTriggerMinWidth={{true}}>content</DMenu> ``` Also changes `FilterNavigationMenu` to use this. --------- Co-authored-by: Martin Brennan <martin@discourse.org>
diff --git a/app/assets/javascripts/discourse/app/components/discovery/filter-navigation-menu.gjs b/app/assets/javascripts/discourse/app/components/discovery/filter-navigation-menu.gjs
@@ -4,7 +4,7 @@ import { fn } from "@ember/helper";
 import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
-import { cancel, schedule } from "@ember/runloop";
+import { cancel } from "@ember/runloop";
 import { service } from "@ember/service";
 import { TrackedObject } from "@ember-compat/tracked-built-ins";
 import { eq } from "truth-helpers";
@@ -15,7 +15,6 @@ import concatClass from "discourse/helpers/concat-class";
 import icon from "discourse/helpers/d-icon";
 import withEventValue from "discourse/helpers/with-event-value";
 import discourseDebounce from "discourse/lib/debounce";
-import { bind } from "discourse/lib/decorators";
 import FilterSuggestions from "discourse/lib/filter-suggestions";
 import { resettableTracked } from "discourse/lib/tracked-tools";
 import { i18n } from "discourse-i18n";
@@ -86,16 +85,6 @@ export default class FilterNavigationMenu extends Component {
 
   @tracked _selectedIndex = -1;
 
-  constructor() {
-    super(...arguments);
-    window.addEventListener("resize", this.resizeDMenu);
-  }
-
-  willDestroy() {
-    super.willDestroy(...arguments);
-    window.removeEventListener("resize", this.resizeDMenu);
-  }
-
   get selectedIndex() {
     return this._selectedIndex;
   }
@@ -387,12 +376,6 @@ export default class FilterNavigationMenu extends Component {
   async openFilterMenu() {
     if (this.dMenuInstance) {
       this.dMenuInstance.show();
-
-      // HACK: We don't have a nice way for DMenu to be the same width as
-      // the input element, so we set it manually.
-      schedule("afterRender", () => {
-        this.resizeDMenu();
-      });
       return;
     }
 
@@ -401,26 +384,9 @@ export default class FilterNavigationMenu extends Component {
       component: FilterNavigationMenuList,
       data: this.trackedMenuListData,
       maxWidth: 2000,
+      matchTriggerWidth: true,
       visibilityOptimizer: VISIBILITY_OPTIMIZERS.AUTO_PLACEMENT,
     });
-
-    // HACK: We don't have a nice way for DMenu to be the same width as
-    // the input element, so we set it manually.
-    schedule("afterRender", () => {
-      this.resizeDMenu();
-    });
-  }
-
-  @bind
-  resizeDMenu() {
-    if (!this.inputElement || !this.dMenuInstance) {
-      return;
-    }
-
-    if (this.dMenuInstance.content) {
-      this.dMenuInstance.content.style.width =
-        this.inputElement.offsetWidth + "px";
-    }
   }
 
   @action
diff --git a/app/assets/javascripts/discourse/tests/integration/components/float-kit/d-menu-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/float-kit/d-menu-test.gjs
@@ -581,4 +581,42 @@ module("Integration | Component | FloatKit | d-menu", function (hooks) {
 
     assert.dom("span.fk-d-menu__trigger").exists();
   });
+
+  test("@matchTriggerWidth", async function (assert) {
+    await render(
+      <template>
+        <DMenu
+          @label="a long label"
+          @inline={{true}}
+          @matchTriggerWidth={{true}}
+          style="width: 200px;"
+        >1</DMenu>
+      </template>
+    );
+
+    await open();
+
+    assert.dom(".fk-d-menu.-content").hasStyle({
+      width: "200px",
+    });
+  });
+
+  test("@matchTriggerMinWidth", async function (assert) {
+    await render(
+      <template>
+        <DMenu
+          @label="a long label"
+          @inline={{true}}
+          @matchTriggerMinWidth={{true}}
+          style="width: 200px;"
+        >1</DMenu>
+      </template>
+    );
+
+    await open();
+
+    assert.dom(".fk-d-menu.-content").hasStyle({
+      minWidth: "200px",
+    });
+  });
 });
diff --git a/app/assets/javascripts/float-kit/addon/lib/constants.js b/app/assets/javascripts/float-kit/addon/lib/constants.js
@@ -84,6 +84,8 @@ export const MENU = {
     contentClass: null,
     class: null,
     updateOnScroll: true,
+    matchTriggerMinWidth: false,
+    matchTriggerWidth: false,
   },
   portalOutletId: "d-menu-portal-outlet",
 };
diff --git a/app/assets/javascripts/float-kit/addon/lib/update-position.js b/app/assets/javascripts/float-kit/addon/lib/update-position.js
@@ -8,6 +8,7 @@ import {
   limitShift,
   offset,
   shift,
+  size,
 } from "@floating-ui/dom";
 import domFromString from "discourse/lib/dom-from-string";
 import { isTesting } from "discourse/lib/environment";
@@ -95,6 +96,28 @@ export async function updatePosition(trigger, content, options) {
     middleware.push(hide({ padding: detectOverflowOptions.padding }));
   }
 
+  if (options.matchTriggerWidth) {
+    middleware.push(
+      size({
+        apply({ rects, elements }) {
+          Object.assign(elements.floating.style, {
+            width: `${rects.reference.width}px`,
+          });
+        },
+      })
+    );
+  } else if (options.matchTriggerMinWidth) {
+    middleware.push(
+      size({
+        apply({ rects, elements }) {
+          Object.assign(elements.floating.style, {
+            minWidth: `${rects.reference.width}px`,
+          });
+        },
+      })
+    );
+  }
+
   content.dataset.strategy = options.strategy || "absolute";
 
   const { x, y, placement, middlewareData } = await computePosition(
