Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Safari: When click on a NavItem without href in the navigation bar, the icon of the previously selected item is not drawn correctly. #33218

Open
2 tasks done
nexryai opened this issue Nov 7, 2024 · 0 comments

Comments

@nexryai
Copy link

nexryai commented Nov 7, 2024

Component

Nav (Preview)

Package version

0.9.1

React version

18.3.1

Environment

System:
OS: macOS 15.1
CPU: (8) arm64 Apple M2
Memory: 275.59 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Browsers:
Chrome: 130.0.6723.92
Safari: 18.1
npmPackages:
@fluentui/react-components: ^9.55.1 => 9.55.1
@fluentui/react-nav-preview: ^0.9.1 => 0.9.1
@types/react: ^18.3.12 => 18.3.12
@types/react-dom: ^18.3.1 => 18.3.1
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1

Current Behavior

In Safari, when you click on an item in the navigation bar, the icon of the previously selected item does not appear.
Everything works fine when using a browser other than Safari (tested with Firefox and Google Chrome).
Below are several screenshots demonstrating the bug using a Storybook example.

1. Announcements -> Employee Spotlight

When you move an item, the icon of the previously selected item disappears.
Image

2. Employee Spotlight -> Announcements

When you return to the previously selected item, the icon of the active item appears, but the icon selected in 1 disappears.
Image

3. Announcements -> Dashboard

When you select another item (Dashboard in this case), the icon of the active item is displayed correctly, but the icons of all previously selected items disappear.
Image

Expected Behavior

The active item is displayed with a colored icon, and the non-active items have the standard icon.
Image

Reproduction

https://stackblitz.com/edit/t646ha?file=src%2Fexample.tsx

Steps to reproduce

  1. Use safari to visit a page with nav.
  2. Click on a NavItem that does not have an href

Are you reporting an Accessibility issue?

None

Suggested severity

Low - Has or doesn't need a workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.
@nexryai nexryai changed the title [Bug]: Safari: When click on an item in the navigation bar, the icon of the previously selected item is not drawn correctly. [Bug]: Safari: When click on a NavItem without href in the navigation bar, the icon of the previously selected item is not drawn correctly. Nov 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants