Rotate arrow indicator in React-select v2

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.

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.