From ed61f7616f5a672c46e6c4efb1340fc55fc4d2e2 Mon Sep 17 00:00:00 2001 From: yousefed Date: Wed, 14 Oct 2026 12:13:48 +0200 Subject: [PATCH] fix(react): show the suggestion menu above its trigger when there is room for fewer than five items below --- .../SuggestionMenu/suggestionMenuMiddleware.ts | 6 +++--- .../slashmenu/suggestionMenuPlacement.test.tsx | 11 +++++++++-- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/react/src/components/SuggestionMenu/suggestionMenuMiddleware.ts b/packages/react/src/components/SuggestionMenu/suggestionMenuMiddleware.ts index f367b9767f..ec535fe8c1 100644 --- a/packages/react/src/components/SuggestionMenu/suggestionMenuMiddleware.ts +++ b/packages/react/src/components/SuggestionMenu/suggestionMenuMiddleware.ts @@ -13,10 +13,10 @@ const PADDING = 10; const MAX_HEIGHT = 600; /** - * The least room (px) the menu needs below its trigger. With less room, the - * menu goes above instead, if there is more room there. + * The least room (px) the menu needs below its trigger: about five items. + * With less room, the menu goes above instead, if there is more room there. */ -const MIN_HEIGHT = 200; +const MIN_HEIGHT = 300; /** * Places the menu below its trigger, unless there is less than `MIN_HEIGHT` diff --git a/tests/src/end-to-end/slashmenu/suggestionMenuPlacement.test.tsx b/tests/src/end-to-end/slashmenu/suggestionMenuPlacement.test.tsx index a4a6c307cd..ea64ff70e2 100644 --- a/tests/src/end-to-end/slashmenu/suggestionMenuPlacement.test.tsx +++ b/tests/src/end-to-end/slashmenu/suggestionMenuPlacement.test.tsx @@ -110,11 +110,18 @@ function side(menu: HTMLElement): "above" | "below" { } test("stays below the trigger when there is enough room, even with more room above", async () => { - // About 300px below the trigger, more above. - const menu = await openSlashMenuAt(innerHeight * 0.55); + // About 380px below the trigger, more above. + const menu = await openSlashMenuAt(innerHeight * 0.45); expect(side(menu)).toBe("below"); }); +test("goes above the trigger when the room below fits only a few items", async () => { + // About 250px below the trigger: a menu there would show only about four + // items, with more room above. + const menu = await openSlashMenuAt(innerHeight * 0.62); + expect(side(menu)).toBe("above"); +}); + test("is no taller than its maximum height, even with more room", async () => { // A taller window than the default 720px, so the room below the trigger // (about 850px) is more than the maximum height.