eclipsesource / eclipsesource/jsonforms

Support for Placeholder option on EnumCells

Open
#1,881 2 comments 0 reactions 0 assignees View on GitHub
feature react vanilla
Dominant language
TypeScript
Stars
2.7k
Forks
424
Avg merge
17d 8h
Merged PRs (30d)
1

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

Screen Shot 2022-02-02 at 9 51 45 PM

### 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 `` so that the select shows the first option as a default

Screen Shot 2022-02-02 at 9 55 11 PM

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 (
handleChange(path, ev.target.value)}
>
{
optionsWithDefault.map(({ value, label, key, disabled = false, hidden = false }) => (

))
}

);
};
```

### Describe alternatives you've considered

### Framework

React

### RendererSet

Vanilla

### Additional context

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.