style prop of ComboboxOptions is ignored

[jussirantala]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v2.0.4

Describe your issue

If you use style prop which exists in ComboboxOptions types, everything you set there is ignored. This makes it impossible to change z-index via props dynamically.

I think you need to make mergePropsAdvanced() to support merging object props together: https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/utils/render.ts#L339

[RobinMalfait]

Hey!

This should be fixed by #3250, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.

[jussirantala]

Hey!

This should be fixed by #3250, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.

@RobinMalfait I tried 0.0.0-insiders.f5ac361 and it still happens 🤔I tried to delete node_modules in case it's a cache issue or something and checked I have that version there.

I'm thinking if you instead should fix the props merging functions to support object props and merging of them. You use mergePropsAdvanced in Portal for example. Now it just replaces theirProps.style with ourProps.style instead of merging them.

[RobinMalfait]

Hmm, if you are using Next.js for example, make sure to also drop the .next folder since it contains caches.

They should be merged correctly:

We could merge it in the props merging logic, but this gives us a bit more control on a per component basis. We could still do that, but I think something else is going on.

[jussirantala]

Hmm, if you are using Next.js for example, make sure to also drop the .next folder since it contains caches.

They should be merged correctly:

We could merge it in the props merging logic, but this gives us a bit more control on a per component basis. We could still do that, but I think something else is going on.

@RobinMalfait

We don't use next.js.

Could you try with portal=true?

[RobinMalfait]

@jussirantala the anchor prop has an implicit portal={true} behind the scenes. Both with and without a portal it works as expected for me.

Can you create a minimal reproduction repo and share it here so that I can take a look?

[jussirantala]

I got it working, thanks for the fix!