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.

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.