Open
Description
Is your feature request related to a problem? Please describe.
Ran into a situation where we need a select field (EnumCell.tsx)which shows a placeholder to mimic placeholders on text fields
Describe the solution you'd like
This seems like the best practice based on SO:
https://stackoverflow.com/questions/5805059/how-do-i-make-a-placeholder-for-a-select-box
React prefers defaultValue on select:
https://stackoverflow.com/questions/44786669/warning-use-the-defaultvalue-or-value-props-on-select-instead-of-setting
When a placeholder prop is passed via options, we could also remove the default option <option value='' key={'empty'} /> so that the select shows the first option as a default
Something like this could work:
export const SelectCell = (props) => {
const { data, className, id, enabled, uischema, path, handleChange, options } = props;
const { options: { placeholder } = {} } = uischema;
const placeholderOption = placeholder ? {
value: 'disabled',
label: placeholder,
key: 'disabled',
disabled: true,
hidden: true,
} : {};
const optionsWithDefault = [
placeholderOption,
...options,
];
return (
<select
className={className}
id={id}
disabled={!enabled}
autoFocus={uischema.options && uischema.options.focus}
value={data || 'disabled'}
onChange={(ev) => handleChange(path, ev.target.value)}
>
{
optionsWithDefault.map(({ value, label, key, disabled = false, hidden = false }) => (
<option
value={value}
label={label}
key={key || value}
disabled={disabled}
hidden={hidden}
/>
))
}
</select>
);
};
Describe alternatives you've considered
Framework
React
RendererSet
Vanilla
Additional context
No response