custom MultiValueRemove props does not work in react-select

user_17052316 0
Viewed 561

enter image description here

react-select allows for customizations of its different components, which is great but for some reason my custom MultiValueRemove (the x icon in a multi select) does not show. Code here

const MultiValueRemove = ({
    innerProps,
  }:MultiValueProps<NormalizedDropdown>) => (
    <components.MultiValueRemove {...innerProps}>
      <IconContainer>
        <Icon name="close" size={12} color="white" />
      </IconContainer>
    </components.MultiValueRemove>
  );

The X icon doesn't show up. This is how I'm using it...

<CreatableSelect
      options={options}
      components={{
        MultiValueRemove,
      }}
 />
react-select reactjs
1 Answers

The example from the docs has the props passed to the component.MultiValueRemove, not innerProps. Then MultiValueRemove uses the props.innerProps and pass it down to the child component, you can confirm it by passing the innerProps directly to the div element inside it:

const MultiValueRemove = (props: MultiValueRemoveProps<ColourOption>) => {
  return (
    <Tooltip content={'Customise your multi-value remove component!'} truncate>
      <components.MultiValueRemove {...props}>
        <EmojiIcon label="Emoji" primaryColor={colourOptions[2].color} />
      </components.MultiValueRemove>
    </Tooltip>
  );
};

Live Demo

user_94494260
Related