useComboBox and --trigger-width

[luansantosti]

Hey guys, I'm building a combobox using the useComboBox hook.
by following the docs, I noticed one thing: the width of my popover/listbox is not the same as the trigger, checking the docs for the combobox component, I saw that there is a css variable --trigger-width to handle this case, but what about for the useCombobox hook? do we have something similar?

btw, I could use a fixed width, but this is not the case since it could change based on the viewport.

Here is a screenshot:

thanks a lot in advance!

[reidbarber]

There isn't one included, but you could include the same feature in your component:

react-spectrum/packages/react-aria-components/src/ComboBox.tsx

Lines 148 to 159 in f914372

	// Make menu width match input + button
	let [menuWidth, setMenuWidth] = useState<string | null>(null);
	let onResize = useCallback(() => {
	if (inputRef.current) {
	let buttonRect = buttonRef.current?.getBoundingClientRect();
	let inputRect = inputRef.current.getBoundingClientRect();
	let minX = buttonRect ? Math.min(buttonRect.left, inputRect.left) : inputRect.left;
	let maxX = buttonRect ? Math.max(buttonRect.right, inputRect.right) : inputRect.right;
	setMenuWidth((maxX - minX) + 'px');
	}
	}, [buttonRef, inputRef, setMenuWidth]);

react-spectrum/packages/react-aria-components/src/ComboBox.tsx

Line 197 in f914372

style: {'--trigger-width': menuWidth} as React.CSSProperties

[luansantosti]

Got it, I'll do that, thanks @reidbarber!