fluentui icon indicating copy to clipboard operation
fluentui copied to clipboard

[Bug]: Tree item stays in hover state after clicking an item in actions menu

Open petrjaros opened this issue 1 year ago • 1 comments

Component

Tree

Package version

9.54.17

React version

18.3.1

Environment

Latest Edge

Current Behavior

(See the steps to reproduce) After clicking any menu item the menu closes and the three item stays in hover state even if the cursor is outside of the tree item.

Expected Behavior

(See the steps to reproduce) After clicking any menu item the menu closes and the three item should return to normal state from the hover state (it should hide tree dots menu icon after the menu is closed)

Reproduction


Steps to reproduce

  1. Go to official FluentV9 Storybook
  2. Navigate to Tree - Actions
  3. Click any ... (tree dot) menu, it opens a menu
  4. Click any menu item

Are you reporting an Accessibility issue?

no

Suggested severity

High - No workaround

Products/sites affected

Teams

Are you willing to submit a PR to fix?

yes

Validations

  • [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • [X] The provided reproduction is a minimal reproducible example of the bug.

petrjaros avatar Oct 07 '24 12:10 petrjaros

Can confirm the bug in the actions example in the docsite. After clicking a menu item, the actions slot remain visible

https://github.com/user-attachments/assets/b6e84780-b605-4241-a602-309123db8732

TristanWatanabe avatar Oct 09 '24 14:10 TristanWatanabe

Here is my hack to fix the behavior:

https://stackblitz.com/edit/yueied-jdgkvz?file=src%2Fexample.tsx

                <Menu
                  onOpenChange={(_, data) => {
                    const focusedElement =
                      document.activeElement as HTMLElement | null;

                    !data.open && focusedElement && focusedElement.blur();
                  }}
                >

petrjaros avatar Nov 06 '24 13:11 petrjaros

This issue has not had activity for over 180 days! We're adding Soft close label and will close it soon for house-keeping purposes. Still require assistance? Please add comment - "keep open".

Because this reported issue has not had any activity for over 180 days, we're automatically closing it for house-keeping reasons.

Still require assistance? Please, create a new issue with up-to date details and latest version of Fluent.