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.

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

[Bug]: Combobox using portal Input not clickable/focusable when within a dialog portal #1170

Open
timmaier opened this issue Jul 30, 2024 · 4 comments
Labels
bug Something isn't working

Comments

@timmaier
Copy link

Environment

Node version: 20.15.1
Radix Vue version: 2.9.2
Vue version: 3.2.32

Please see stackblitz

Link to minimal reproduction

https://stackblitz.com/edit/ptivtd?file=src%2FApp.vue

Steps to reproduce

Add a Combobox input that uses ComboboxPortal. Add a ComboboxInput within the ComboboxViewport. Place this component within a Dialog.

Describe the bug

The ComboboxInput is not focusable and cannot accept any keyboard input.

Expected behavior

The ComboboxInput should be focusable and searchable when placed within a Dialog.

Context & Screenshots (if applicable)

Screenshot 2024-07-30 at 11 29 34 AM
@timmaier timmaier added the bug Something isn't working label Jul 30, 2024
@timmaier timmaier changed the title [Bug]: Combobox using portal and with input not clickable/focusable when within a dialog portal [Bug]: Combobox using portal Input not clickable/focusable when within a dialog portal Jul 30, 2024
@zernonia
Copy link
Member

It's related to FocusScope within Dialog component. If element were teleported out from the scope, you cannot focus on it.

As a temporary solution you can remove ComboboxPortal and let it render inline, this way the ComboboxInput will stay within the scope.

@kilobyte2007
Copy link
Contributor

kilobyte2007 commented Jul 31, 2024

Thanks a lot @zernonia! Your solution seems to work well, but feels more like a hack (hence you said temporary). What would be a natural solution?
If I understand correctly we'd need to give priority to the Combobox focus over the Dialog's FocusScope somehow.

@timmaier
Copy link
Author

timmaier commented Jul 31, 2024

Yes I've removed the portal in our use case for now too. This prevents the ability to use position popper though with prevent collision.

@kilobyte2007
Copy link
Contributor

Hi @zernonia, is this planned for v2 or will it be left for later? Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants