Describe the bug (current behavior) Close handler of the <code cla

Looks like this issue is caused by this code: <div class="Box Bo

This is fixed in <a href="https://github.com/iTwin/iTwinUI/releases/tag/%40itwin%2Fitw

This is fixed in <a href="https://github.com/iTwin/iTwinUI/releases/tag/%

`DropdownMenu` close issue about itwinui HOT 7 CLOSED

GerardasB commented on August 26, 2024

`DropdownMenu` close issue

from itwinui.

Comments (7)

Ben-Pusey-Bentley commented on August 26, 2024

Thanks for submitting this issue. I can reproduce this with your reproduction steps. Additionally, I can confirm that adding keys to the menu items and changing the onClick from close to () => close() do not fix this issue. This is certainly an issue on our end. Will raise it with the rest of the team.

from itwinui.

mayank99 commented on August 26, 2024

Looks like this issue is caused by this code:

iTwinUI/packages/itwinui-react/src/core/DropdownMenu/DropdownMenu.tsx

Lines 86 to 88 in 40bd8ec

 const close = React.useCallback(() => { 

 setVisible(false); 

 triggerRef.current?.focus({ preventScroll: true });

We want to move focus back to the element that triggered the menu, but in the case of submenu it turns out to be the parent menu-item rather than the button.

I wonder why it doesn't happen for three levels of menus though. And it only happens when clicking on some menu-items but not others 🤔

@GerardasB I also wonder what your use-case is for four levels of nested menus. Your users won't be happy if you subject them to such monstrosities 😅

from itwinui.

rohan-kadkol commented on August 26, 2024

I wonder why it doesn't happen for three levels of menus though. 🤔

When I put a console.log() in close(), I noticed that it was actually not being called at all when I clicked on "Item 4_2". So, I was investigating why that is the case.

One thing I noticed was that the current focus element (document.activeElement) changes the outcome. So, when I opened the menu the first time, the active element was "Item 1_3". Hovering through the submenu till "Item 4_2" and clicking it does not close the menu. But it also causes the activeElement to now become the body.

When the activeElement is the body, clicking "Item 4_2" closes the menu completely.

Enregistrement.de.l.ecran.2024-03-21.a.5.55.38.PM.mov

I also noticed that removing the focus trigger in MenuItem causes the menu to close correctly.

iTwinUI/packages/itwinui-react/src/core/Menu/MenuItem.tsx

Line 130 in 40bd8ec

trigger: { hover: true, focus: true },

Investigating this further.

Looks like this issue is caused by this code:

I'm not sure I understood this. Because I think there's just one triggerRef and that is attached to the children of the DropdownMenu, which in this case is the button that triggered it.

https://github.com/iTwin/iTwinUI/blob/main/packages/itwinui-react/src/core/DropdownMenu/DropdownMenu.tsx#L112

from itwinui.

mayank99 commented on August 26, 2024

Actually I misspoke. I thought we were using DropdownMenu for submenus, but we are only using Menu there, so the code I linked is not directly relevant for the submenus. In fact, close() does not get called because onClick itself never gets called.

My hunch is that when mousedown happens on Item 4_2, focus tries to move to it but as a result focus also leaves the originally focused parent menu item. This in turn closes the submenu (because of the focus trigger set on usePopover), meaning Item 4_2 no longer exists, and therefore mouseup never happens and the click never completes. Additionally, since Item 4_2 doesn't exist, the browser moves focus to <body>.

To follow the progress of focus more clearly, you could also log it every 5ms instead of using a watch expression (where quick changes might get missed).

Code

let previousActiveElement;

setInterval(function() {
  if (previousActiveElement !== document.activeElement) {
    console.log("focus moved");
    console.log(document.activeElement);
    previousActiveElement = document.activeElement;
  }
}, 5);

from itwinui.

rohan-kadkol commented on August 26, 2024

A quick update: After quite a bit of trial and error, I believe the issue is with the isNestedSubmenuVisible logic (code). Because of that issue, the submenu of the first MenuItem with a submenu (Item 1_3 in this case) closes whenever we focus into level 4 (Item 4_x).

This is more apparent when navigating with the keyboard instead of the mouse:

Enregistrement.de.l.ecran.2024-03-22.a.1.49.04.PM.mov

I think your hunch is in the right direction. When I did a mousedown, the focus changed to Item 4_2. Due to the reason mentioned above, the submenu under Item 1_3 closes upon changing the focus to Item 4_2. When Item 4_2 does not exist, like you mentioned, the focus moves to <body>. Another consequence of the Item 4_2 not existing is that the onClick (and thus also the close()) does not get called upon a mouseup.

Enregistrement.de.l.ecran.2024-03-22.a.1.57.45.PM.mov

I believe once I fix the isNestedSubmenuVisible logic, the problem in this issue will be solved. Currently working on this.

from itwinui.

mayank99 commented on August 26, 2024

This is fixed in 3.10.0 🚀

/cc @HaveSpacesuit I think you might benefit from this

from itwinui.

HaveSpacesuit commented on August 26, 2024

This is fixed in 3.10.0 🚀

/cc @HaveSpacesuit I think you might benefit from this

It did help with the issue of a submenu item not performing the click action in some environments. Thanks!

from itwinui.

`DropdownMenu` close issue about itwinui HOT 7 CLOSED

Comments (7)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	const close = React.useCallback(() => {
	setVisible(false);
	triggerRef.current?.focus({ preventScroll: true });