Repository navigation
fix(header): mobile Navigate menu opens the nav popover (#1652) - #1655
Merged
Merged
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #1652.
Problem
On mobile / narrow viewports the
ui5-shellbarcollapses 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
clickevent reportstargetRef= the transientui5-liinside the shellbar's overflow popover (ShellBarItemTemplate.jsrenders the item as aListItemStandardwheninOverflow). That overflow popover closes itself on the same click (ShellBar.handleOverflowItemClick). Our handler then setnavPopover.opener = <that list item>and opened — but the opener is being detached as the overflow popover closes, and aui5-popovercannot 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 aui5-litargetRef) 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-popoveractually opens. Self-skips withoutSMOKE_BASE_URL; runs in the post-DEV-deploye2eCI job.test/unit/hugo/header-mobile-nav-overflow.test.ts— pins the fix so a future edit can't silently revert it (runs innpm test).Verification
@ui5/webcomponents-fiori2.23.2 source.origin/main(0 fix tokens) → green with the fix; fulltest/unit/hugo/suite 52/52 pass.