Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Menu: arrow keys not working as expected when used in a shadow root #382

Closed
sidharthramesh opened this issue Mar 21, 2021 · 2 comments
Closed

Menu: arrow keys not working as expected when used in a shadow root #382

sidharthramesh opened this issue Mar 21, 2021 · 2 comments
Assignees
@claviska
Labels
bug Things that aren't working right in the library.

Comments

@sidharthramesh
Copy link
Contributor

Describe the bug
When the sl-dropdown is nested inside another custom element (using lit-element) the arrow down key only moves till the 2nd option.

To Reproduce
Steps to reproduce the behavior:

  1. Go to this codepen
  2. Click on the dropdown on the left
  3. Press down arrow to navigate options
  4. See error

Expected behavior
The same behaviour as when using it directly on a page.

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser: Chrome
  • Version: 89.0.4389.90

Screen recording

q8nBfjZfmO
@sidharthramesh sidharthramesh added the bug Things that aren't working right in the library. label Mar 21, 2021
@sidharthramesh sidharthramesh mentioned this issue Mar 22, 2021
Closed
@claviska claviska changed the title Sl-Dropdown - Arrow down not working as expected Dropdown: arrow keys not working as expected Mar 22, 2021
@claviska claviska changed the title Dropdown: arrow keys not working as expected Menu: arrow keys not working as expected when used in a shadow root Mar 22, 2021
@claviska
Copy link
Member

Thanks for reporting this. It turned out to be a bug in sl-menu, not sl-dropdown.

Due to retargeting, when document.activeElement is used and the focused element is inside a shadow root, the active element is reported as the host element instead of the menu item.

sidharthramesh added a commit to sidharthramesh/medblocks-ui-componets that referenced this issue Mar 22, 2021
@sidharthramesh
Merge pull request #1 from shoelace-style/next
7877b61 
fixes shoelace-style#382
@sidharthramesh
Copy link
Contributor Author

That was quick! Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@claviska claviska

Labels
bug Things that aren't working right in the library.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@claviska @sidharthramesh