[Bug]: Combobox goes outside the view

[maelp]

trafficstars

Reproduction

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

Describe the bug

When the combobox is at the bottom of the view (or more commonly: at the bottom of an AlertDialog or whatever) it can often "leave the window", and doesn't seem to use avoid-collisions to show on the right side

System Info

System:
    OS: macOS 14.1.2
    CPU: (8) arm64 Apple M1
    Memory: 101.98 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    Yarn: 1.16.0 - ~/.node/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: 8.15.4 - ~/Library/pnpm/pnpm
    Watchman: 2024.01.22.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 123.0.6312.58
    Safari: 17.1.2
  npmPackages:
    @vueuse/core: 10.8.0 => 10.8.0 
    radix-vue: 1.5.3 => 1.5.3 
    vue: 3.4.19 => 3.4.19

Contributes

• [ ] I am willing to submit a PR to fix this issue
• [ ] I am willing to submit a PR with failing tests

[hrynevychroman]

@maelp Thank for your reproduction 👍

Based on radix-vue docs you can limit available height to define scroll, but this is not the approach you are chasing.

I made a small fix on your repo where just added min-h-[100px] to PopoverContent component. reproduction. This forces Radix-vue to recalculate position and place Content above our trigger.

@sadeghbarati Hello mate, I don't think this issue is valid to shadcn-vue repo, maybe need to update radix-vue docs, what do you think?

[sadeghbarati]

@romanhrynevych Hello Roman, sure, go ahead

I'm not familiar with FloatingUI stuff

[maelp]

@sadeghbarati @romanhrynevych any update on this? is there a way to fix this without having to introduce an arbitrary size limit?

[maelp]

@romanhrynevych the bug still exists when we add the Combobox in a Dialog, any idea how to fix this?

https://stackblitz.com/edit/fls328-mq6rcb?file=src%2FApp.vue,src%2Fcomponents%2Fui%2Fpopover%2FPopover.vue

[hrynevychroman]

@maelp Everything works fine for me, can you add some screenshots?

[maelp]

If you make the window smaller it doesn't display correctly

[hrynevychroman]

Based on same logic with min-h, just increase size to 210px taken from screenshot and everything works fine 🙂

Reproduction: https://stackblitz.com/edit/fls328-chcabe?file=src%2FApp.vue

[maelp]

hmmmm weird, I'd rather not use a large min-h, because otherwise if there's only a few options it will be "mostly empty" no? @sadeghbarati

[gregmsanderson]

I've been finding the same issue. In my case I found that adding a max height to the <CommandList> made it adjust its position e.g.

<CommandList class="max-h-[140px]">

I see that Radix Vue now has a dedicated Combobox component so I'm not sure if the idea is to replace this with that, or continue to use the Popover/Command for it?