Add state modifiers (like isFocused) to MultiValueRemove component state
See original GitHub issueHi, 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!
Issue Analytics
- State:
- Created 4 years ago
- Reactions:2
- Comments:5
@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 likeinputIsFocused
to provide more context of what’s focused.Thanks for your speedy reply @ebonow. I ended up using
useState
to pass a prop calledinstanceIsFocused
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.