Rotate arrow indicator in React-select v2 - reactjs

Question

I'm using React Select v2 in my project with Styled Components and I need to be able to turn the arrow indicator upside down when the menu is open, which was supported in v1.
I kinda managed to do it by doing this:
css`
&.react-select__control--is-focused {
& .react-select__indicators {
& .react-select__dropdown-indicator {
transform: rotate(180deg);
}
}
}
`;
Problem is that, if I press the arrow to open the menu and click on it again to close it, the arrow stays upside down because the select is still focused, which feels a bit weird in terms of UIX.
Is there a proper way to rotate it based on the state of the menu? I looked for something in the documentation but I couldn't find it.
Maybe I missed it, if someone could point me in the right direction, that'd be awesome!
Thanks!

Answer 1

Technically you can use the style-in-JS props of the v2. Like the following example:
dropdownIndicator: (base, state) => ({
...base,
transition: 'all .2s ease',
transform: state.isFocused ? 'rotate(180deg)' : null
})
It seems that the isFocused state isn't bind with the isMenuOpen state but with the real focus state of the container.
A solution is to set closeMenuOnSelect={false} so the user would have to click outside the select and your arrow will flip back.
Or you could change the className props using onMenuOpen and onMenuClose by adding a specific suffix to target your animation.
UPDATE
You can directly access the menuOpen props via the state so no need to manually add class like the following:
dropdownIndicator: (base, state) => ({
...base,
transition: 'all .2s ease',
transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : null
})
PLEASE NOTE THAT
In react-select v2.3 a control--menu-is-open has been added directly in the code.

Answer 2

This worked for me
<select styles={{
dropdownIndicator: (provided, state) => ({
...provided,
transform: state.selectProps.menuIsOpen && "rotate(180deg)"
})
}}
/>

Answer 3

So, based on Laura's response, my solution was to use the onMenuClose and onMenuOpen to set the state of a property in my styled component.
const indicatorStyle = (props: StyledSelectProps & DropdownProps<{}>) => css`
& .react-select__indicators {
& .react-select__dropdown-indicator {
transition: all .2s ease;
transform: ${props.isOpen && "rotate(180deg)"};
}
}
`;
This function is called inside of my styled component's css.
And then in the component I call my styled component, I control the state:
export class Dropdown<TValue> extends React.Component<DropdownProps<TValue>> {
public state = { isOpen: false };
private onMenuOpen = () => this.setState({ isOpen: true });
private onMenuClose = () => this.setState({ isOpen: false });
public render() {
const { ...props } = this.props;
const { isOpen } = this.state;
return (
<StyledSelect {...props} isOpen={isOpen} onMenuOpen={this.onMenuOpen} onMenuClose={this.onMenuClose} />
);
}
}
A bit convoluted but it works for now.

Answer 4

This worked for me.
dropdownIndicator: (base, state) => ({
...base,
transform: state.selectProps.menuIsOpen ? 'rotate(-90deg)' : 'rotate(0)',
transition: '250ms',
}),

Answer 5

i solved this issue like this.
mostly you have to play arround with these in your css to do stuff on certain conditions
--is-focused
--menu-is-open
--is-disabled
--is-selected
styled component css
.paginatorPageSizeCustomSelectPreffix__indicator {
svg {
color: var(--black);
height: 18px;
width: 18px;
transform: rotate(180deg);
transition: 0.2s;
}
}
.paginatorPageSizeCustomSelectPreffix__control--menu-is-open {
.paginatorPageSizeCustomSelectPreffix__indicator {
svg {
color: var(--black);
height: 18px;
width: 18px;
transform: rotate(360deg);
transition: 0.2s;
}
}
}
}