Add state modifiers (like isFocused) to MultiValueRemove component state

Hi, it would be great to have a little more control over the MultiValueRemove component in react-select. Most components get the <component>-is-focused classes applied, but it seems like this one doesn’t. My guess is that it’s slightly more complex than others because of the left/right arrow key navigation to delete selected options, but not having access to these various properties makes it difficult to override the styles.

Here’s the hack I have to resort to for overriding the styles:

Create custom component for MultiValueRemove

const CustomMultiValueRemove = ({ ...props }) => {
  return (
    <components.MultiValueRemove {...props}>
      <span className="multi-value-remove-button">
        <div className="multi-value-remove-icon" />
      </span>
    </components.MultiValueRemove>
  )

Omit the styles from the style function that I want to override

    const styleOverrides = {
      multiValueRemove: (base, state) => ({
        ...omit(base, [':hover', 'color', 'backgroundColor']),
      }),
    }

Not the prettiest solution, since I’m basically nuking the default functionality and injecting my own custom markup just to have more control.

Anyway, let me know if there’s a better way of doing this or if this is planned for the future!

[ebonow]

@Slapbox the issue is mostly semantics at this point as isFocused (or isDisabled) could potentially refer to the specific component or the Select. That is the main reason why it wasn’t originally included in all of the components and it’s likely that a future version will contain something like inputIsFocused to provide more context of what’s focused.

[Slapbox]

Thanks for your speedy reply @ebonow. I ended up using useState to pass a prop called instanceIsFocused which works great. I should have clarified in my original post, “seemingly impossible with the built-in props.”

I was just surprised it was not possible, since I’d think that tracking overall focus would be built in with how robust the library is. It would be great to have it built-in. Thanks to you and everyone else whose hard work makes this project possible.