Clarity: Dropdown flashes open when using arrow keys

[coryrylan]

Describe the bug

When a dropdown button target is focused the dropdown does not open when using the arrow keys but instead flashes open and quickly closes.

How to reproduce

You can recreate this by looking at the dropdown angular component demo in the docs.
Will be fixed with smart popovers PR.
https://clarity.design/documentation/dropdowns

Steps to reproduce the behavior:

1. Focus the dropdown button
2. Use the down arrow key and note how it flashes open but then quickly closes.

Expected behavior

The dropdown should open and remain open without scrolling the page.

Versions

• Angular: 8.x
• Clarity: 2.x

Device:

• Type: Macbook
• OS: MacOS
• Browser Chrome
• Version 47

[AlexMarcuBytex]

While i was investigating this issue, i found that this bug reproduces just on nested dropdowns. If we re looking for a quick fix, we can replace that nested dropdown with a normal one, considering that isn't needed a nested one in that specific demo. I think this bug occurs because of the "clrIfOpen" directive. If i dont use it, the bug doesnt reproduce either the dropdown is nested or not.
Should this bug be fixed the way i presented above?
Also, assign this to me for more investigations if needed.

[gnomeontherun]

@Jinnie Can you take a quick look?

[Jinnie]

The clrIfOpen is a supported and even recommended scenario.
I think that it does not _cause_ a problem, but mostly _reveals_ an underlying one.
At some point, the keydown event must be preventDefault-ed, so we don't allow the whole view to scroll. Probably some component does that when the menu is initialized, but it's not done when only the dropdown-trigger is initialized.
If you follow the code, it registers itself to a DropdownFocusHandler service where the actual handlers for arrow-up/down are registered. We have two options:

• either add preventDefault to the handlers
• or try to reuse the /src/clr-angular/utils/focus/key-focus/util.ts#preventArrowKeyScroll` helper if possible.

[bbogdanov]

@Jinnie The preventDefault will help with the arrow keys, but what bothers me is that the popover gets closed when the parent component is scrolled. Is this an expected behavior?

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.