You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by hn...@apache.org on 2026/06/08 12:06:47 UTC
(myfaces-tobago) 01/02: fix(dropdown): position
This is an automated email from the ASF dual-hosted git repository.
henningn pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
commit 63bcaa27010dfbef5584a16e863adac9f27037fe
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Mon Jun 8 12:59:52 2026 +0200
fix(dropdown): position
* add test
* fix
Issue: TOBAGO-2525
---
.../tobago-example-demo/src/main/scss/demo.scss | 4 +++
.../900-test/button/dropdown/Dropdown.xhtml | 13 +++++++++
.../src/test/typescript/button.test.ts | 34 +++++++++++++++++++++-
.../src/main/ts/tobago-dropdown-menu.ts | 6 ++--
4 files changed, 53 insertions(+), 4 deletions(-)
diff --git a/tobago-example/tobago-example-demo/src/main/scss/demo.scss b/tobago-example/tobago-example-demo/src/main/scss/demo.scss
index 08a56b47a3..84b90f3982 100644
--- a/tobago-example/tobago-example-demo/src/main/scss/demo.scss
+++ b/tobago-example/tobago-example-demo/src/main/scss/demo.scss
@@ -145,3 +145,7 @@ .transformX0 {
.text-tertiary-color {
color: var(--bs-tertiary-color);
}
+
+.margin-tobago-dropdown-menu-offset {
+ margin: var(--tobago-dropdown-menu-offset);
+}
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/button/dropdown/Dropdown.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/button/dropdown/Dropdown.xhtml
index 27b8a9bdf6..eb02e9eb8d 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/button/dropdown/Dropdown.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/button/dropdown/Dropdown.xhtml
@@ -158,4 +158,17 @@
<tc:link id="fixedRight6Entry" label="Link" omit="true"/>
</tc:button>
+ <br/>
+ <p>The next buttons have a margin of "margin-tobago-dropdown-menu-offset". This is to force
+ DropdownMenuStatic.getHorizontalPositionAndSize() to return left=0 and right=0.</p>
+
+ <tc:button id="fixedLeft0" label="fixedLeft0" omit="true">
+ <tc:style position="fixed" left="0px" customClass="margin-tobago-dropdown-menu-offset"/>
+ <tc:link id="fixedLeft0Entry" label="Link" omit="true"/>
+ </tc:button>
+ <tc:button id="fixedRight0" label="fixedRight0" omit="true">
+ <tc:style position="fixed" right="0px" customClass="margin-tobago-dropdown-menu-offset"/>
+ <tc:link id="fixedRight0Entry" label="Link" omit="true"/>
+ </tc:button>
+
</ui:composition>
diff --git a/tobago-example/tobago-example-demo/src/test/typescript/button.test.ts b/tobago-example/tobago-example-demo/src/test/typescript/button.test.ts
index e9ac03949d..abe215d0b3 100644
--- a/tobago-example/tobago-example-demo/src/test/typescript/button.test.ts
+++ b/tobago-example/tobago-example-demo/src/test/typescript/button.test.ts
@@ -430,13 +430,19 @@ test.describe("900-test/button/dropdown/Dropdown.xhtml", () => {
}
});
- test("fixed left=5px; right=6px", async ({page, browserName}) => {
+ test("fixed left=5px; right=6px; left=0px; right=0px", async ({page, browserName}) => {
const fixedLeft5ToggleButton = page.locator("[id='page:mainForm:fixedLeft5::command']");
const fixedLeft5DropdownMenu = page.locator(".tobago-dropdown-menu[data-tobago-for='page:mainForm:fixedLeft5']");
const fixedLeft5Entry = page.locator("[id='page:mainForm:fixedLeft5Entry']");
const fixedRight6ToggleButton = page.locator("[id='page:mainForm:fixedRight6::command']");
const fixedRight6DropdownMenu = page.locator(".tobago-dropdown-menu[data-tobago-for='page:mainForm:fixedRight6']");
const fixedRight6Entry = page.locator("[id='page:mainForm:fixedRight6Entry']");
+ const fixedLeft0ToggleButton = page.locator("[id='page:mainForm:fixedLeft0::command']");
+ const fixedLeft0DropdownMenu = page.locator(".tobago-dropdown-menu[data-tobago-for='page:mainForm:fixedLeft0']");
+ const fixedLeft0Entry = page.locator("[id='page:mainForm:fixedLeft0Entry']");
+ const fixedRight0ToggleButton = page.locator("[id='page:mainForm:fixedRight0::command']");
+ const fixedRight0DropdownMenu = page.locator(".tobago-dropdown-menu[data-tobago-for='page:mainForm:fixedRight0']");
+ const fixedRight0Entry = page.locator("[id='page:mainForm:fixedRight0Entry']");
await expect(fixedLeft5Entry).not.toBeVisible();
await fixedLeft5ToggleButton.click();
@@ -446,6 +452,7 @@ test.describe("900-test/button/dropdown/Dropdown.xhtml", () => {
await page.keyboard.press("Escape");
await expect(fixedLeft5Entry).not.toBeVisible();
await expect(fixedLeft5ToggleButton).toBeFocused();
+
await page.keyboard.press("Tab");
await expect(fixedRight6ToggleButton).toBeFocused();
await expect(fixedRight6Entry).not.toBeVisible();
@@ -453,5 +460,30 @@ test.describe("900-test/button/dropdown/Dropdown.xhtml", () => {
await expect(fixedRight6Entry).toBeVisible();
await expect(fixedRight6DropdownMenu).toHaveCSS("right", "-10px");
await expect(fixedRight6DropdownMenu).toHaveCSS("max-width", "1258px");
+ await page.keyboard.press("Escape");
+ await expect(fixedRight6Entry).not.toBeVisible();
+ await expect(fixedRight6ToggleButton).toBeFocused();
+
+ await page.keyboard.press("Tab");
+ await expect(fixedLeft0ToggleButton).toBeFocused();
+ await expect(fixedLeft0Entry).not.toBeVisible();
+ await page.keyboard.press("Enter");
+ await expect(fixedLeft0Entry).toBeVisible();
+ await expect(fixedLeft0DropdownMenu).toHaveCSS("left", "0px");
+ await expect(fixedLeft0DropdownMenu).toHaveCSS("max-width", "1248px");
+ await page.keyboard.press("Escape");
+ await expect(fixedLeft0Entry).not.toBeVisible();
+ await expect(fixedLeft0ToggleButton).toBeFocused();
+
+ await page.keyboard.press("Tab");
+ await expect(fixedRight0ToggleButton).toBeFocused();
+ await expect(fixedRight0Entry).not.toBeVisible();
+ await page.keyboard.press("Enter");
+ await expect(fixedRight0Entry).toBeVisible();
+ await expect(fixedRight0DropdownMenu).toHaveCSS("right", "0px");
+ await expect(fixedRight0DropdownMenu).toHaveCSS("max-width", "1248px");
+ await page.keyboard.press("Escape");
+ await expect(fixedRight0Entry).not.toBeVisible();
+ await expect(fixedRight0ToggleButton).toBeFocused();
});
});
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-dropdown-menu.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-dropdown-menu.ts
index d10d008d3c..a3eafa1800 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-dropdown-menu.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-dropdown-menu.ts
@@ -201,9 +201,9 @@ export class DropdownMenu {
const right = horizontalPositionAndSize.right;
const maxWidth = horizontalPositionAndSize.maxWidth;
- this.dropdownMenuElement.style.left = left ? left + "px" : null;
- this.dropdownMenuElement.style.right = right ? right + "px" : null;
- this.dropdownMenuElement.style.maxWidth = maxWidth ? maxWidth + "px" : null;
+ this.dropdownMenuElement.style.left = left !== null ? left + "px" : null;
+ this.dropdownMenuElement.style.right = right !== null ? right + "px" : null;
+ this.dropdownMenuElement.style.maxWidth = maxWidth !== null ? maxWidth + "px" : null;
}
private get stickyHeader(): HTMLElement {