Fluentui: dropdown callout scrolls randomly on mouse enter

[rihorn2]

Environment Information

• __Package version(s)__: 6.162.1
• __Browser and OS versions__: Chrome

Please provide a reproduction of the bug in a codepen:

repro: https://codepen.io/anon/pen/PgQeXG?&editable=true

Actual behavior:

scrolling in the dropdown callout works, however moving the mouse within the callout, or inside and outside the callout leads to the view being scrolled in random directions.

Expected behavior:

Only scroll when mouse scrolls....

Priorities and help requested:

Are you willing to submit a PR to fix? if I had time...

Requested priority: Normal

Products/sites affected: Azure ML

[ecraig12345]

Thanks for reporting this! Clarifying the repro steps a bit:

1. Open the dropdown
2. Scroll down in the dropdown menu
3. Move the mouse around within the dropdown menu

Expected: Menu either doesn't scroll, or only scrolls when the mouse reaches the very top/bottom

Actual: Menu jumps up and down a lot

Seems like mainly an issue with Dropdown and/or ContextualMenu's mouse move handling: I'm guessing the intended behavior was to scroll up/down as the mouse moves towards the top/bottom, but instead of only scrolling when very near the top/bottom, it scrolls at other times too.

I also noticed in the original codepen that the menu sometimes jumps back up to the top on mouse move, but that's probably due to some of the options having duplicate keys (when you hover over a later "Apple" option, the menu jumps back up to the first "Apple" option).

Here's another codepen which avoids the duplicate key issue and includes a ContextualMenu showing similar jumpy behavior: https://codepen.io/ecraig12345/pen/WWMaXy?editors=0010

[rihorn2]

Thank you for replying! The jumping was how I first noticed it in my application, which does not have any duplicate keys. So the jumping does still occur with unique keys, I just threw together a codepen quickly but the behavior exactly mirrors what I see in a real application. As a workaround, I've just styled the ComboBox to act like a dropdown.

[joschect]

@rihorn2 and @ecraig12345 this is pretty weird, it looks like this is caused because of the mouseenter event, it calls element.focus(), but the odd thing is that it doesn't look like it's been touched in quite a while. I'll keep looking.

[ecraig12345]

Minor update, turns out I was wrong about Dropdown using ContextualMenu. But Jon is still investigating.

[zhr1130]

Hello, do we have any update on this bug ?

[joschect]

Okay I figured it out. This is due to the fact that the callout itself is what has the onscroll event listener on it rather than the list. That means that when you put the height on the list that the normal scroll event that the dropdown would get, never actually happens and so it’s not processed appropriately. It’s a simple workaround as you can see in this codepen .

That said I think that this speaks to how confusing the dropdown is when it comes to having a fixed height. I’m not quite sure the right fix other than maybe adding more documentation.

[joschect]

Fixing this so that we remove confusion should be part of the refactor in #6030

[micahgodbolt]

Can still repro as of 7.78.0

[agg23]

To clarify as per @joschect, this issue arises from directly setting the height of the dropdown (or one of its constituent elements) via CSS:

styles={{ dropdownItemsWrapper: { maxHeight: '500px' } }}

The solution is to correctly set it using calloutProps:

calloutProps={{ calloutMaxHeight: 500 }}

[Umbrous]

To clarify as per @joschect, this issue arises from directly setting the height of the dropdown (or one of its constituent elements) via CSS:

styles={{ dropdownItemsWrapper: { maxHeight: '500px' } }}

The solution is to correctly set it using calloutProps:

calloutProps={{ calloutMaxHeight: 500 }}

Thanks, it's work