[RAC] Popover style inside Select & ComboBox does not works properly

[6thpath]

Provide a general summary of the issue here

when using Select or ComboBox component, passing style as function to Popover component would make --trigger-width style property is unavailable

🤔 Expected Behavior?

Popover inside Select & ComboBox also receive --trigger-width even if style is specified as a function

😯 Current Behavior

--trigger-width is not passed to Popover when style is passed to component as a function

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/racpopover-lfv6dt

try to comment the 33rd line and uncomment the 34th line.
as you can see, whenever style prop is function then --trigger-width is not passed to the popover

Version

latest

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[sookmax]

I did some digging, and it looks like the root cause of this is the fact that useContextProps() will merge contextProps and props only when both of them are of type object:

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

Lines 193 to 204 in a597a0c

	// mergeProps does not merge `style`. Adding this there might be a breaking change.
	if (
	'style' in contextProps &&
	contextProps.style &&
	typeof contextProps.style === 'object' &&
	'style' in props &&
	props.style &&
	typeof props.style === 'object'
	) {
	// @ts-ignore
	mergedProps.style = {...contextProps.style, ...props.style};
	}

Since the above condition is not met when a user provides their style as a function, it resorts to the default merging strategy of mergeProps(contextProps, props), which is to select the value of the last argument (in our case, props over contextProps:

react-spectrum/packages/@react-aria/utils/src/mergeProps.ts

Lines 68 to 70 in a597a0c

	} else {
	result[key] = b !== undefined ? b : a;
	}

So that's why the contextProps passed by Combobox that contains style: {'--trigger-width': menuWidth} is overwritten by the user provided style={() => ({ background: "red" })}.