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

Dropdown component used within a shadow root unexpectedly closes when tabbing into slotted elements #223

Open
zolk opened this issue Sep 25, 2020 · 2 comments · Fixed by #224 · May be fixed by #2371
Open

Dropdown component used within a shadow root unexpectedly closes when tabbing into slotted elements #223

zolk opened this issue Sep 25, 2020 · 2 comments · Fixed by #224 · May be fixed by #2371
Assignees
@claviska
Labels
bug Things that aren't working right in the library.

Comments

@zolk
Copy link
Contributor

zolk commented Sep 25, 2020 •
edited
Loading

Describe the bug
If sl-dropdown is consumed within the shadow root of another component, the handleDocumentKeyDown() method is unable to accurately obtain the activeElement. (In this case, document.activeElement returns the name of the containing shadow root, rather than the active element within that shadow root.) This causes a problem if attempting to tab into a dropdown's slotted content such as form elements.

To Reproduce
Steps to reproduce the behavior:

  1. Create a new Stencil component with shadow: true
  2. In the new component's render method, return a sl-dropdown with a form input in the default slot.
  3. Using the new component, use keyboard navigation to focus and open the dropdown. Then press Tab to focus into the slotted form input.
  4. Dropdown closes, preventing use of the form input.

Expected behavior
User should be able to tab into the form input as expected without the dropdown closing.

Screenshots
Screen Recording 2020-09-25 at 17 48 54

Branch with minimum reproduction
zolk@63e23c7
@zolk zolk added the bug Things that aren't working right in the library. label Sep 25, 2020
@zolk zolk mentioned this issue Sep 25, 2020
Merged
@claviska
Copy link
Member

Good catch. Your fix does the trick!

Thanks for the well-formatted issue and elegant PR! 🙌

@belgamo belgamo linked a pull request Feb 8, 2025 that will close this issue
Open
@belgamo
Copy link

belgamo commented Feb 8, 2025

@claviska would you mind reopening it? I still face this issue when the sl-dropdown is consumed deeper in the shadow root of another component, as @zolk's fix looks only at the first shadow root level. Here's a minimum reproduction.

After fixing that, I noticed the same thing happens when you render anything that is not a sl-menu, such as a nav with links, because it can't properly find the closest containing element to compare (I admit I didn't fully comprehend why).

I've fixed that in #2371

@claviska claviska reopened this Feb 8, 2025
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
3 participants
@zolk @claviska @belgamo