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

[timmaier]

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)

[zernonia]

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]

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]

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]

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

[timmaier]

What we ended up doing is moving our dialog to use headlessui dialog instead. That way we can continue to use portal rendering strategy in modals.

The downside to this is nested modals are not as nice having to do a lot of nextTick hacks. As vue headless expects nested modals to be within the parent modals context :(

[JustusBaumhove]

Hi, are there plans to fix this for v1?

[zernonia]

Hi guys! I've found the issue and here's some context and a solution.

The combobox wasn't initially designed for ComboboxInput to be used within the ComboboxContent, thus we exclude FocusScope component from wrapping the ComboboxContent. Without another stack of focus scope, the dialog's focus scope was in effect and causing the input unable to be focused.

Here's a simple solution, wrap the ComboboxViewport with (newly exposed) FocusScope component as such.

<FocusScope asChild trapped>
    <ComboboxViewport>
        ...
    </ComboboxViewport>
</FocusScope>

[kilobyte2007]

That's really great! Thanks @zernonia. Looking forward to the release so that I can test this in our project. Will this be available in alpha 9?

[doriandevelops]

@zernonia Thanks for this solution I spent a bit of time debugging this and it took me a while to come across this issue where you have the fix mentioned. Is this documented anywhere else? Also would wrapping the ComboboxViewport with <FocusScope asChild trapped> cause any issues or side effects to comboboxes that aren't used within a dialog? Thanks again!