in v2, how to set the position of the ComboboxOptions relative to the ComboboxButton instead of ComboboxInput?

[IDrissAitHafid]

In version 1, I created a multi-select combobox something like this one and it worked correctly.

However, now using the V2 with setting the anchor prop, the position of the ComboboxOptions gets translated if an option is selected, because from what I understood it is positioned relatively to the input and the input gets pushed by the selected options. and since I have the ComboboxButton fixed I'm wondering if it is possible to position the ComboboxOptions relatively to it.

It looks correct on if no option is selected:

Here's how it looks if one element is selected:

Any help would be appreciated 🙏

[dd-jonas]

I'm facing the same issue, I haven't found a workaround for this

[dd-jonas]

Given that a multi Combobox looks something like this

<Combobox as="div" multiple immediate>
    <MyTags />
    <ComboboxInput />
    <ComboboxButton>...</ComboboxButton>
    <ComboboxOptions anchor="bottom">...</ComboboxOptions>
</Combobox>

I think the only solution that makes sense is to anchor the floating panel to the topmost <Combobox> element? I dont think that's an easy thing to do, especially since it defaults to Fragment.
I used to wrap the tags and input inside the button so that the panel opens on input click, which would make it possible to anchor to the ComboboxButton instead. But that was a workaround before the immediate prop existed, so I wouldn't like to keep doing that if not needed.

My current workaround is to expose a CSS property myself with the combobox width, combined with some hacky alignment and offset, but it's not perfect.

[enzoferey]

For people that have landed here, the "combined with some hacky alignment and offset" solution can be quite perfect. Here is how you may do it:

1. Make sure your ComboboxOptions is anchored to bottom start or top start. The start part is important for the input offset calculation.
2. Then, you would define some state handling for computing the options width and offset. Here I'm supporting resize of the window + value changes, you may adapt based on your needs:

const [inputElement, setInputElement] =
      React.useState<HTMLInputElement | null>(null);
const [inputWrapperElement, setInputWrapperElement] =
  React.useState<HTMLDivElement | null>(null);
    
const [optionsWidth, setOptionsWidth] = React.useState<number>(0);
const [optionsTranslate, setOptionsTranslate] = React.useState<number>(0);

const updateOptionsWidth = React.useCallback(
  (inputWrapperElement: HTMLDivElement | null) => {
    if (inputWrapperElement === null) {
      return;
    }

    setOptionsWidth(inputWrapperElement.clientWidth);
  },
  [],
);

const updateOptionsOffset = React.useCallback(
  (inputElement: HTMLDivElement | null) => {
    if (inputElement === null) {
      return;
    }

    setOptionsTranslate(-inputElement.offsetLeft);
  },
  [],
);

React.useEffect(() => {
  updateOptionsWidth(inputWrapperElement);
  updateOptionsOffset(inputElement);

  const resizeCallback = () => {
    updateOptionsWidth(inputWrapperElement);
    updateOptionsOffset(inputElement);
  };

  window.addEventListener("resize", resizeCallback);

  return () => {
    window.removeEventListener("resize", resizeCallback);
  };
}, [
  inputWrapperElement,
  inputElement,
  updateOptionsOffset,
  updateOptionsWidth,
]);

React.useEffect(() => {
  updateOptionsOffset(inputElement);
}, [inputElement, updateOptionsOffset, values]);

3. Pass the computed values to the ComboboxOptions:

<ComboboxOptions
  ...
  anchor="bottom start"
  style={{
    width: optionsWidth,
    transform: `translateX(${optionsTranslate}px)`,
  }}
>