[Joy] Fix list value of false or 0 (zero) text is incorrectly grey

[kushagra010]

Fixes #34210

• I have followed (at least) the PR section of the contributing guide.

After fix: https://codesandbox.io/s/joy-issue-34210-select-component-qdwi3h?file=/demo.js

[mui-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 65cdaab

[neovirtual]

This should work in almost every scenario, but if ownerState.value happens to be an object with properties, those properties will be merged with the styles object and potentially overwrite something or even accidentally add a style, or it might trigger a warning or error elsewhere if the style object is validated because it contains invalid properties. It is very unlikely but possible. I would suggest something like: (ownerState.value === null || ownerState.value === undefined) && {
opacity: 'var(--Select-placeholderOpacity)',
}

[kushagra010]

@neovirtual
I agree with the above scenario but I just realized, that there shouldn't be any case where we should do this based on value. If we consider the scenario raised by you in this issue, we should add opacity when either the value is null or undefined.

1. For value=null
   The current functionality is to deselect all options if the value is null. And I don't think anyone would need to do something like this to select the option Null, also if this is done, then it will override the functionality to deselect all options and so the Null option will be selected.

const [value, setValue] = useState(0);
<Select value={value} onChange={(v) => setValue(v)}>
	<Option value={null}>Null</Option>
	<Option value={0}>Zero</Option>
</Select>

2. For value=undefined
   According to current functionality, it will not select the option with a value equal to undefined. This means in the case below, you will not be able to select the Undefined option.

const [value, setValue] = useState(0);
<Select value={value} onChange={(v) => setValue(v)}>
	<Option value={undefined}>Undefined</Option>
	<Option value={0}>Zero</Option>
</Select>

[neovirtual]

@kushagra010 It appears we are in agreement about applying the placeholderOpacity style based on checking for null or undefined value as opposed to using the javascript nullish coalescing operator (??). If the current value given to the Select component is 0 (zero) or false, it should highlight the corresponding list item. I have not checked whether that is working as expected and it was not the reason I opened this bug report, but nonetheless it is an important matter to look into. Thank you.

[siriwatknp]

👍 Thanks for your first contribution!

I'd love to hear your feedback about Joy UI. What do you like and what should be improved? let me know!