How to display selected items in the menu as well, after they have been selected?

Question

We have a Select for customizable styles inside a rich text editor.

I expected that there was something like showSelectedOptionsInMenu prop or some sort of magic prop for the Option component.

The default behavior of react-select is to hide from the menu the items that have already been selected (in isMulti mode) and I wish to display the selected Option s styles differently and disabled.

There are no error messages.

I have tried to search the docs of React-Select and did not find anything interesting.

The only thing I can think of is re-implement the Menu component. Is this the correct way?

A piece of code:

<Select
  options={opts}
  value={selectedStyle}
  isMulti={true}
  styles={selectStyles}
  placeholder="No Style"
  noOptionsMessage={({ inputValue }) =>
    intl.formatMessage(messages.allStylesApplied)
  }
  components={{
    // Shows the most relevant part of the selection as a simple string of text.
    MultiValue: (props) => {
      const val = props.getValue();

      if (props.index === 0) {
        const cond = val.length > 1;
        const lbl = val[props.index].label + '...';
        const lbl2 = val[props.index].label;
        return <>{cond ? lbl : lbl2}</>;
      }

      return '';
    },
  }}
  theme={(theme) => {
    return {
      ...theme,
      colors: {
        ...theme.colors,
        primary: '#826A6AFF', // 100% opaque @brown
        primary75: '#826A6Abf', // 75% opaque @brown
        primary50: '#826A6A7f', // 50% opaque @brown
        primary25: '#826A6A40', // 25% opaque @brown
      },
    };
  }}
  onChange={(selItem) => {
    setSelectedStyle(selItem);
    // toggleBlock(editor, 'style');
  }}
></Select>

Thank you.

Answer 1

There is a prop on the Select component that, if set to false, does what I want.