jsonforms

jsonforms copied to clipboard

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

related to https://github.com/eclipsesource/jsonforms/issues/1840

Hi @julesterrien, thanks for the suggestion. Definitely looks interesting!

Would you like to contribute this (including tests etc.)?