Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extend BaseSelectField component so that it renders disabled options #2791

Open
dmazaleuskaya opened this issue Jan 3, 2022 · 0 comments
Open

Comments

@dmazaleuskaya
Copy link
Contributor

Describe the solution you'd like
I want the component to accept the disabledValues: Array<SelectOptionValueProp> 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<React.Element<typeof DatalistItem | 'li'>>((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 <span className={isDisabled ? 'disabled' : ''}>{item.displayText}</span>
         };


        <BaseSelectFiled 
                onChange={onChange}
                optionRenderer={optionRenderer}
         />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants