Blueprint: Submenu automatically opening up in certain cases (@blueprintjs/[email protected])

[tnrich]

in @blueprintjs/[email protected]

https://codesandbox.io/s/m38yvkywxp

This isn't an issue with the blueprint v3 beta css, so something changed.

PS Your codesandbox is out of date and should be updated. It took me a while to figure out that the outdated version was causing my reproduction to fail. Maybe there's a way you could always have the most recent versions linked in your official fiddle?

Thanks!

[tnrich]

@giladgray bump :)

[giladgray]

@tnrich yes this is a problem. no i do not have a clean solution at the moment. i've toyed with it a few times but yet to solve it. ideas?

[tnrich]

What is the underlying issue? I don't think I understand why it would
happen in the first place. Thanks!

On Thu, Aug 30, 2018 at 5:20 PM Gilad Gray [e-mail] wrote:

@tnrich https://github.com/tnrich yes this is a problem. no i do not
have a clean solution at the moment. i've toyed with it a few times but yet
to solve it. ideas?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/palantir/blueprint/issues/2863#issuecomment-417509316,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACmqca_mdy2Ca3CiWRYKRxQLneU4wxhsks5uWIE5gaJpZM4WIG7z
.

[giladgray]

the issue is Popover autoFocus picking the first submenu item, and focusing that item causing it to open. repeat ad infinitum. more generally, it's an issue with how menu items are made focusable--which ones can be tabbed to by default.

[tnrich]

Why does the popover autoFocus pick the first submenu item? Why not focus on the first menu item (submenu or just normal item)?

[tnrich]

Maybe they should not be able to be tabbed to. In google docs at least the menu items are treated as a single entity (which can be tabbed to) and then once within the menu the arrow keys are used to navigate.

Could be a solution?

Thanks!

[tnrich]

Here's a screen capture of that interaction:

It's hard to tell what's going on, but when I'm within the menu I'm using the arrow keys

[veggiesaurus]

Adding to this issue, when the auto-focusing behaviour occurs, none of my sub-menu entries are clickable, which is far more annoying. I have to basically click them, then hover over the parent entry again, and then click the sub-menu entry again. See this sandbox.
I've tried disabling captureDismiss on the popover, as suggested by #2796 , but that didn't help either

[tnrich]

@giladgray thoughts on this? What did you think about my suggestion above to have menu's be key-up/down navigable?

[giladgray]

@tnrich menu navigation is a big feature i want to tackle soon, including adding arrow key support. this is not a small change though so it'll require some serious time and investment to get right.

[wluxion]

Adding on: seems like this issue is related to the behavior shown below, which makes menus feel very broken if they're used to track state of any kind.

Is there a way to address this bug without refactoring the whole component?

[mulholio]

How's this coming along? Has anyone worked out a hot-fix that can be used whilst we wait for a propper update?

[synapse]

I'm still having this issue on 3.8.0. Any ideas?

[tnrich]

It seems like the issue I'm seeing below is probably related?

I guess the autofocus bug will occur with any nested tooltip too?

[tnrich]

The big downside to setting autofocus=false is that then you can't easily tab around the popover?

[tnrich]

@tnrich menu navigation is a big feature i want to tackle soon, including adding arrow key support. this is not a small change though so it'll require some serious time and investment to get right.

@giladgray any updates on this? Still seeing this issue in a bunch of spots

[junknown]

Hi,
I found a solution for this annoying problem.
Menu seems to work properly by setting the popoverProps openOnTargetFocus on every MenuItem with children.
Sandbox: https://codesandbox.io/embed/blueprint-sandbox-q1ryv

I think that it should be set by default.

[tnrich]

@junknown I don't see any difference in the two examples in your sandbox. They both open without the submenu popping up.

[junknown]

@junknown I don't see any difference in the two examples in your sandbox. They both open without the submenu popping up.

Sorry, i think i posted a wrong link, but i can't find the right one, so i edited the latest.
Now should be better: https://codesandbox.io/embed/blueprint-sandbox-q1ryv

[tnrich]

Hmm @junknown still not seeing it?

[tuxflo]

I'm facing the same issue but with a Menu that is controlled by Hotkeys. Is there a way to disable the autofocus when the Menu/Submenu is opened by a Hotkey? (currently using blueprintjs/core version 3.19.1)

[ellisio]

@tnrich I think what he was getting at is the following both items fix the issue:

1. Add autoFocus={false} to <Popover>.
2. Add popoverProps={{ openOnTargetFocus: false }} to the MenuItem that contains a submenu.

Here is a more refined example showing the broken experience, fix option 1, and fix option 2.

https://codesandbox.io/s/blueprint-sandbox-snvpc