react icon indicating copy to clipboard operation
react copied to clipboard

Published 20 hours ago • verified publisher icon primer

Incorrect z-index for Popover on top of SubNavListItem

Open zaviermiller opened this issue 8 months ago • 3 comments

Description

There is a bug with the new Marketplace search functionality where our navigation items that have a sub-list are appearing over the search popover.

Here is a screenshot:

Image showing that the menu popover for marketplace search is underneath the navlist items with subnav items

The expected behavior of this page is that the popover and its elements appear on top of the list.

I have tracked the issue down to this line, and it appears that there has been a different PR that addressed a similar issue here.

Playing around in devtools shows the isolation fix from the PR does work here. Happy to open a PR to fix this!

Steps to reproduce

  1. Visit https://github.com/marketplace?type=apps&copilot_app=true
  2. Click the search bar and begin typing 'category'
  3. Click on the category item that appears in the popover
  4. Notice that the items from the popover are underneath the nav items with sub nav items.

Version

37.9.1

Browser

No response

zaviermiller avatar Mar 19 '25 17:03 zaviermiller

@zaviermiller I want to work on this issue. Can you please guide which branch to clone.?

shraddhak1989 avatar Mar 24 '25 04:03 shraddhak1989

Next steps would be to investigate the bug and figure out how much effort this would be

sunnyi101 avatar Mar 24 '25 16:03 sunnyi101

Thanks for creating this issue @zaviermiller!

Playing around in devtools shows the isolation fix from the PR does work here. Happy to open a PR to fix this!

We'd definitely appreciate a PR if you have the time, but if not I can follow up with one! :grin:

TylerJDev avatar Mar 27 '25 14:03 TylerJDev

I couldnt reproduce this bug:

Image

KirankumarAmbati avatar Jun 19 '25 07:06 KirankumarAmbati

Uh oh! @KirankumarAmbati, at least one image you shared is missing helpful alt text. Check https://github.com/primer/react/issues/5799#issuecomment-2986970600 to fix the following violations:

  • Images should have meaningful alternative text (alt text) at line 3

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

github-actions[bot] avatar Jun 19 '25 07:06 github-actions[bot]

I am also no longer able to reproduce this bug. Please reopen or comment with repro steps if this is still occurring 🙏🏻

lesliecdubs avatar Jul 29 '25 23:07 lesliecdubs