Comments (7)
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.
Looks like this issue is caused by this code:
iTwinUI/packages/itwinui-react/src/core/DropdownMenu/DropdownMenu.tsx
Lines 86 to 88 in 40bd8ec
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.
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.
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.
from itwinui.
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.
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.
This is fixed in 3.10.0 🚀
/cc @HaveSpacesuit I think you might benefit from this
from itwinui.
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.
Related Issues (20)
- `IconButton` label is displayed after button is clicked HOT 2
- Table, when enabling/disabling columns, view scrolls down to table HOT 3
- Table crashed HOT 1
- Draggable `Dialog` does not automatically resize well HOT 2
- `Table` layout regression in 3.6 HOT 2
- [Table] Expandable row selection toggle works incorrectly when there are disabled rows under it HOT 7
- Missing message on `RadioTileGroup` or `InputGroup` causes crash in React 17 HOT 1
- Add year selection option to DateRangeFilter and DatePickerInput HOT 2
- <Tooltip> Performance problems in <Table> HOT 4
- Table filter alignment issue for popup window on 3.x HOT 1
- ComboBox dropdown sizing problem when using sublabels HOT 4
- Shift in `Table` component when resizing column with Expandable Row HOT 1
- Table: Issue in column Resizing when there is action manager in columns HOT 2
- Empty table state's elements are not centered HOT 1
- ComboBox controlled state not working
- Request to have a copy feedback message using the same elements from a tooltip HOT 1
- Inline `LabeledInput` has an unnecessary row gap HOT 1
- Add dropdownMenuProps to ComboBox HOT 1
- Tree: nodes with and without expander do not align HOT 3
- Missing package.json mappings for itwinui-react/react-table while using "moduleResolution": "node16" HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from itwinui.