Automatically calc Combobox.Dropdown's maxHeight

[antonmedv]

Hi,

First, thanks a lot for a great component lib! We use it and love it ❤️

We use Combobox.Dropdown, with a lot of stuff inside it. So it grows quite a bit. We set maxHight to 800. And we also have div with overflow: hidden. So the dropdown get truncated. Is it possible to add a featue to automatically calculate maxHight so the dropdown will still "fit" within the window?

Thanks!

[rtivital]

Hi, thanks for the kind words!

To implement this feature, you can wrap options with Scrollarea.Autosize. Here is how it is implemented in the Select component – https://github.com/mantinedev/mantine/blob/master/packages/@mantine/core/src/components/Combobox/OptionsDropdown/OptionsDropdown.tsx#L166-L185

[antonmedv]

Thanks, I will try to do the same.

[antonmedv]

Hmm, looks like I do not understand something:

function MySelect() {
  const combobox = useCombobox({
    onDropdownClose: () => combobox.resetSelectedOption(),
  })

  return (
    <Combobox store={combobox}>
      <Combobox.Target>
        <InputBase onClick={() => combobox.toggleDropdown()} />
      </Combobox.Target>
      <Combobox.Dropdown>
        <ScrollArea.Autosize>
          {new Array(100).fill(null).map((_, index) => (
            <div>Option {index + 1}</div>
          ))}
        </ScrollArea.Autosize>
      </Combobox.Dropdown>
    </Combobox>
  )
}

Here is how the overflow looks like:

I can add mah <ScrollArea.Autosize mah={300}>, but what i was asking is there a way to not specify max hight, and use all available space for the popup?

[rtivital]

It is not supported out of the box in Mantine components now.

If you want to limit dropdown size by viewport, it can be done like this:

• Subscribe to scroll event of window and get current element position with const position = element.getBoundingClientRect().top
• Calculate max dropdown height with the following:

<ScrollArea.Autosize mah={`calc(100dvh - ${position}px)`}>