Skip to content

fix(header): mobile Navigate menu opens the nav popover (#1652) - #1655

Merged
jung-thomas merged 1 commit into
mainfrom
worktree-fix-1652-mobile-nav-overflow
Aug 11, 2026
Merged

jung-thomas merged 1 commit into
mainfrom
worktree-fix-1652-mobile-nav-overflow

Conversation

@jung-thomas

Copy link
Copy Markdown
Contributor

Fixes #1652.

Problem

On mobile / narrow viewports the ui5-shellbar collapses items into its built-in overflow (burger) popover. Tapping Navigate inside that overflow menu closed the menu but never opened the navigation popover — the reporter saw "menu just closes, nothing happens". Desktop (item shown as a button in the bar) worked fine.

Root cause

In overflow, the clicked item's click event reports targetRef = the transient ui5-li inside the shellbar's overflow popover (ShellBarItemTemplate.js renders the item as a ListItemStandard when inOverflow). That overflow popover closes itself on the same click (ShellBar.handleOverflowItemClick). Our handler then set navPopover.opener = <that list item> and opened — but the opener is being detached as the overflow popover closes, and a ui5-popover cannot anchor to a detached/hidden opener, so it silently no-ops. The same latent bug affected Share in overflow.

Fix

hugo/layouts/partials/header.html: detect the overflow case (ShellBarItem.inOverflow, or a ui5-li targetRef) and anchor the nav/share popover to the always-present overflow button ([data-ui5-stable="overflow"]) instead, deferring the open one animation frame so it lands after the overflow popover has closed (avoids a two-popover focus race). Desktop behavior is unchanged — it still anchors to the specific item button.

Tests

  • test/e2e/header-mobile-nav.test.js — drives the real click path at a 390px phone viewport and asserts #sb-nav-popover actually opens. Self-skips without SMOKE_BASE_URL; runs in the post-DEV-deploy e2e CI job.
  • test/unit/hugo/header-mobile-nav-overflow.test.ts — pins the fix so a future edit can't silently revert it (runs in npm test).

Verification

  • Root cause traced conclusively through @ui5/webcomponents-fiori 2.23.2 source.
  • Unit guard: confirmed red on origin/main (0 fix tokens) → green with the fix; full test/unit/hugo/ suite 52/52 pass.
  • Behavioral e2e requires a deployed env to execute (self-skips locally) — will run against DEV post-deploy. Happy to deploy to DEV for a live mobile check on request.

On narrow/mobile viewports the ui5-shellbar collapses items (Navigate,
Share) into its built-in overflow (burger) popover. Tapping an item there
reported a targetRef pointing at the transient list item INSIDE the overflow
popover — which closes itself on the same click. A ui5-popover cannot anchor
to a detached opener, so opening our nav/share popover against that targetRef
silently no-op'd: the menu just closed and nothing appeared.

Detect the overflow case (ShellBarItem.inOverflow, or a ui5-li targetRef) and
anchor to the always-present overflow button instead, deferring the open one
frame so it lands after the overflow popover has closed (avoids a two-popover
focus race). Desktop keeps anchoring to the specific item button.

Tests:
- test/e2e/header-mobile-nav.test.js — drives the real click path at a phone
  viewport and asserts #sb-nav-popover opens (post-deploy, self-skips locally).
- test/unit/hugo/header-mobile-nav-overflow.test.ts — pins the fix tokens.
@jung-thomas
jung-thomas marked this pull request as ready for review August 11, 2026 14:59
@jung-thomas
jung-thomas merged commit 96b437f into main Aug 11, 2026
4 checks passed
@jung-thomas
jung-thomas deleted the worktree-fix-1652-mobile-nav-overflow branch August 13, 2026 15:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feedback]: Mobile - Navigation not shown

1 participant