You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
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.
Expected Behavior
The active item is displayed with a colored icon, and the non-active items have the standard icon.
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
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.
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.
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.
Expected Behavior
The active item is displayed with a colored icon, and the non-active items have the standard icon.
Reproduction
https://stackblitz.com/edit/t646ha?file=src%2Fexample.tsx
Steps to reproduce
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
The text was updated successfully, but these errors were encountered: