Fix #4197 in various themes by showing empty option in SelectWidget when appropriate

[nickgros]

Fix #4197 for antd, chakra-ui, fluentui-rc, material-ui, mui, semantic-ui

Checklist

• [ ] I'm updating documentation
  • [ ] I've checked the rendering of the Markdown text I've added
• [X] I'm adding or updating code
  • [X] I've added and/or updated tests. I've run npm run test:update to update snapshots, if needed.
  • [ ] I've updated docs if needed
  • [X] I've updated the changelog with a description of the PR
• [ ] I'm adding a new feature
  • [ ] I've updated the playground with an example use of the feature

[nickgros]

@heath-freenome WDYT about moving this change to the optionsList util function so all themes are provided a placeholder entry when appropriate? This has a huge downstream effect on all of our tests (and maybe users selecting enums programmatically?) where the enum option index values would now be offset if a placeholder option is present. For example this would be the rendered HTML for a simple enum with ['foo', 'bar']

old

<select>
	<option value="">placeholder</option>
	<option value="0">foo</option>
	<option value="1">bar</option>
</select>

new

<select>
	<option value="0">placeholder</option>
	<option value="1">foo</option>
	<option value="2">bar</option>
</select>

[heath-freenome]

@heath-freenome WDYT about moving this change to the optionsList util function so all themes are provided a placeholder entry when appropriate? This has a huge downstream effect on all of our tests (and maybe users selecting enums programmatically?) where the enum option index values would now be offset if a placeholder option is present. For example this would be the rendered HTML for a simple enum with ['foo', 'bar']

old

<select>
	<option value="">placeholder</option>
	<option value="0">foo</option>
	<option value="1">bar</option>
</select>

new

<select>
	<option value="0">placeholder</option>
	<option value="1">foo</option>
	<option value="2">bar</option>
</select>

Hey Nick, That could be considered a breaking change. While it kind of make sense, it requires that we have access to placeholder in the fields (I'm not sure we do) in a way that would work properly. Maybe we can use the labelValue() function in place of the placeholder || ''? or we assign placeholder = '' in the destructure?

[Vity01]

Any progress on this?

[nickgros]

Another reason to not update the optionsList utility is because it also affects radio groups. This best to be left to the SelectWidget implementations. Future PRs may improve the theme-specific behavior by e.g. rendering 'clear' buttons instead of a blank placeholder option.

[Vity01]

Excellent, thank you @nickgros

[mahendra790]

@nickgros Is there any way to opt out of this feature? because to remove this I need to add default: "" which makes it a valid field and required validation is not applied.

[nickgros]

@mahendra790 Sorry, I'm not understanding what you expect to happen, especially because this behavior was how the core theme worked originally.

Could you set the default value in the schema to be equal to the the first option in your list of options?

[XavierLeTohic]

The updated RJSF Antd theme now displays placeholders as selectable options (differing from Antd's default behavior), and without an opt-out mechanism in uiSchema, it requires a custom Select widget implementation for cases where we need the original behavior. 😕