box / box/box-ui-elements

Extend BaseSelectField component so that it renders disabled options

Open
#2,791 0 comments 0 reactions 0 assignees View on GitHub
enhancement
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

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.