Fluentui: Context menu sub-links don't expand on hover if all links have href

[hamedy]

Sub menu items don't expand on hover if every node on them has href. Only if at least one node doesn't have href, the ones with submenu items would expand, after you hover on the one without href at least once! like that action triggers something than enables the expansion on hover.

{
    key: "29",
    name: "Operations",
    subMenuProps: {
        items: [{
            key: "30",
            name: "Global Operations",
            canCheck: true,
            href: "/sites/intranet/Operations/GlobalOperations",
            subMenuProps: {
                items: [{
                    key: "31",
                    name: "Project Engineering",
                    href: "/sites/intranet/Operations/Project%20Engineering",
                    subMenuProps: null
                }]
            },
        }, {
            key: "36",
            // onClick: () => {
            //     location.href = "/sites/intranet/Operations/ManufacturingAndLaboratory"
            // },
            name: "Manufacturing and Laboratory",
            href: "/sites/intranet/Operations/ManufacturingAndLaboratory",
            subMenuProps: {
                items: [{
                    key: "37",
                    name: "System Design",
                    href: "/sites/intranet/Operations/System%20Design",
                }
            },
        }]
    },
}

So second level items are links themselves but on hover should show a third level menu. But right now you have to click which navigates the page. So I can't access the third level.

Removing the href makes the expansion on hover work so I thought I use onclick to get rid of the href but onclick doesn't work either.
Am I missing something here? Spent too much time on this and can't get it to work.

Thanks for your help in advance :)

[ecraig12345]

Thanks for reporting this! I'll look into it, but in the meantime, here's a codepen with a repro:
https://codepen.io/ecraig12345/pen/MZjyjZ

In the future, if you can provide a codepen in the issue, that would be great. An easy way to start is to go to the doc page for the component (here for context menu) and look for an example that has an "Export to CodePen" button.

[ecraig12345]

@joschect helped figure this out (thanks!), and I've opened PR #7429 with the fix.

[KevinTCoughlin]

@joschect helped figure this out (thanks!), and I've opened PR #7429 with the fix.

Nice collaboration! And thank you @hamedy for raising awareness of this issue 🎉.

[hamedy]

thanks for the quick response everyone :) couple of questions, I used this in a CommandBar component, the fix will apply to all components that use ContextualMenu I hope?
And how long it usually takes til the fix is published?

Hamed

[KevinTCoughlin]

thanks for the quick response everyone :) couple of questions, I used this in a CommandBar component, the fix will apply to all components that use ContextualMenu I hope?

Correct, the fix _should_ apply to all components which use ContextualMenu.

And how long it usually takes til the fix is published?

We release nightly, after which the bot will comment on this issue thread with the OUFR version which contains the fix. Here's an example: https://github.com/OfficeDev/office-ui-fabric-react/issues/7318#issuecomment-446205053

[msft-github-bot]

:tada:This issue was addressed in #7429, which has now been successfully released as [email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site

[hamedy]

ok, discovered another bug here. The fix works perfectly fine in Chrome. But in IE, the submenu expansion only works after the second hover event! so If I hover on one item and wait, it never expands. Have to move the cursor out and hover one more time to get it to work.

Hope we can get a quick fix for this. Our customer is running out of patience with us for not getting a basic function like a multi level menu to work as expected.

Thanks,
Hamed

[ecraig12345]

@hamedy Sorry to hear the change didn't seem to help in IE. Would you mind verifying again that you're using v6.117.1 or later (which should contain the fix)?

[hamedy]

yes, just double checked and I'm using the latest version :)

[hamedy]

no news here?

[hamedy]

@KevinTCoughlin @ecraig12345 should I open a separate case for this? seems like this one is not getting any attention! I'm running out of time and don't want to switch my fabric UI component just because of this bug alone.

[Vitalius1]

@ecraig12345 I closed #7562 for the reason that it refers to this reopened issue and the author felt like not getting traction in here.

Did you have a chance to look into what could be the reason this bug was not fixed by #7429 for IE?

[ecraig12345]

Sorry about the delay, I just got back from vacation. I'll try and get the issue fixed this week.

[dzearing]

@hamedy So sorry for the inconvenience! We're bumping the priority of this up to try and get you something quickly.

[ecraig12345]

Got it I think...see #7592. The easiest way to verify the fix is using the "ContextualMenu with submenus" example from the demo site once it's deployed.

[hamedy]

@ecraig12345 excellent! I see the merging got blocked. Could you please follow this up until we get it published as quickly as possible?

thank you :)

[ecraig12345]

The new test I tried to write was broken. It's fixed now, so I'm just waiting on someone to approve the new screener (visual test) states.

[dzearing]

I'd like to close this once we hear from @hamedy that we are good.

[dzearing]

Kicking off a publish right now.

[msft-github-bot]

:tada:This issue was addressed in #7592, which has now been successfully released as [email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site

[dzearing]

@hamedy can you check that this is resolved for you using 6.124.1?

[hamedy]

just tested and works great. thank you all :) Really appreciate the fast responses :)

Hamed