React-select: Remove or attach 'disabled' to options with closeMenuOnSelect = false

[pentla]

Is there anything way to disable or not disable option with 'closeMenuOnSelect = false'?
Code is here.
https://codesandbox.io/s/react-select-remove-or-attach-disabled-in-options-with-closemenuonselect-false-44sfr

I am using custom component with react-select.
I want to display other component aside options and disabled in specific option while option is open.
But disabled option not reactive. Choose other option, option's disabled style is removed, but option is disabled.
I would be appreciate if you could tell me any property or solution.

This is sample code.

const options = [
  { value: 'first', label: 'first' },
  { value: 'removeDisabled', label: 'removeDisabled' },
  { value: 'disabled', label: 'disabled' }
]

const Component = () => {
  const [select, setSelect] = useState({
    value: 'first',
    label: 'first'
  })
  return (
    <Select
      closeMenuOnSelect={false}
      options={options}
      value={select}
      onChange={value => {
        setSelect(value)
      }}
      isOptionDisabled={option => option.value === 'disabled' && select.value !== 'removeDisabled'}
    />
  )
}

[ebonow]

Greetings,

The isOptionDisabled filter only appears to run when there are new options.

I would approach this by mapping them with an isDisabled attribute. You can then remap the visible options onChange.

  const options = [
    { value: "first", label: "first" },
    { value: "removeDisabled", label: "removeDisabled" },
    { value: "disabled", label: "disabled" }
  ];

  const getDisabledOptions = (selected) => {
    return options.map((option) => ({
      ...option,
      isDisabled:
        option.value === "disabled" && selected.value !== "removeDisabled"
    }));
  };

  const [select, setSelect] = useState(options[0]);
  const [mappedOptions, setMappedOptions] = useState(
    getDisabledOptions(options[0])
  );

  const onChange = (value) => {
    setSelect(value);
    setMappedOptions(getDisabledOptions(value));
  };

  const isOptionDisabled = (option) => option.isDisabled;

  return (
    <Select
      closeMenuOnSelect={false}
      options={mappedOptions}
      value={select}
      onChange={onChange}
      isOptionDisabled={isOptionDisabled}
    />
  );

Here is a working example:
https://codesandbox.io/s/react-select-dynamic-disabled-options-0r47p?file=/src/index.js

Let me know if this helps or if you were expecting different results. Also if this does resolve your issue, please feel free to close this issue.

[pentla]

Thank you very much!
It's good idea to manage options in state.I will try to take in product.

And thanks for tell me so kindly and this working example was very helpful.
I close this issue.