RAC ComboBox/Select - Custom trigger element

[universse]

I want to allow users to add custom content to ComboBox, similar to this pattern https://ant.design/components/select#select-demo-suffix. The issue is the Popover width will match the input width and not the wrapper.

I cannot set the --trigger-width directly as the ComboBox is supposed to expand to fiill available space.

Is there a way to achieve this currently? If not, it would be great to be able to set a custom trigger.

Here's a sample ComboBox. https://stackblitz.com/edit/vitejs-vite-sqhhsja1?file=src%2FApp.tsx

[snowystinger]

Does this help? #7115 (comment)

[universse]

Thanks for the direction. I have managed to make it work. https://stackblitz.com/edit/vitejs-vite-efcf2r6r?file=src%2FApp.tsx,src%2Findex.css.

I adapted the measurement code from RAC.ComboBox. The issue is the Popover's positioning is still relative to the input. I need to override both --trigger-width and left of Popover. It feels hacky and brittle though.

.react-aria-Popover[data-trigger='ComboBox'] {
  left: var(--trigger-left) !important;
}

[universse]

Apparently this method does not work in Next.js app https://stackblitz.com/edit/stackblitz-starters-upucpvvz?file=app%2Fcombo-box-comp.tsx

On page load, the measured rect's properties are all 0. It works correctly only when arriving at the component page from another page.

I had the same issue on an Astro site. So I think it's something to do with SSR.

Could you please take a look?