Extend BaseSelectField component so that it renders disabled options
- Dominant language
- TypeScript
- Stars
- 551
- Forks
- 351
- Avg merge
- 5d 9h
- Merged PRs (30d)
- 31
Description
**Describe the solution you'd like**
I want the component to accept the `disabledValues: Array` prop. When select options are rendered the check will be performed to identify whether an option is disabled. If it is, interaction props are not passed and special styling is applied (opacity: 0.5).
const selectOptions = filteredOptions.map>((item, index) => {
const { value } = item;
const isSelected = selectedValues.includes(value);
const isDisabled = disabledValues.includes(value);
const isClearOption = shouldShowClearOption && value === CLEAR;
const itemProps: Object = {
className: classNames('select-option', { 'is-clear-option': isClearOption, 'is-disabled-option': isDisabled }),
key: index,
...(isDisabled ? {} : {
/* preventDefault on click to prevent wrapping label from re-triggering the select button */
onClick: event => {
event.preventDefault();
if (isClearOption) {
this.handleClearClick();
} else {
this.selectOption(index);
}
},
onMouseEnter: () => {
this.setActiveItem(index, false);
},
setActiveItemID: this.setActiveItemID,
})
};
**Describe alternatives you've considered**
A possible solution is to ignore disabled values and apply styling to the option name on the consumer's side. The drawback is that the option will still look interactive since it's not possible to change styling of the option wrapper.
const disabledValues = ['1', '2'];
const onChange = item => {
const isDisabled = disabledValues.includes(item.value);
if (isDisabled) {
return;
}
// update value
};
const optionRenderer = item => {
const isDisabled = disabledValues.includes(item.value);
return {item.displayText}
};
Contributor guide
Assessment
This issue has not been assessed yet.