Flip arrow on open and close

[hichemfantar]

The arrow should should be flipped upside down to indicate that the menu is open and that clicking again will close the menu.
This is simply a proposal, other opinions are welcome.
A simple prop like InvertArrowOnOpen would be nice.
Final result:

[manjushsh]

Hi @hichemfantar, you can do same using custom components.

Select:

<Select
        components={{
          DropdownIndicator
        }}
        value={value}
        onChange={updateValue}
        options={options}
      />

Custom component:

const DropdownIndicator = (props) => {
  const { menuIsOpen } = props.selectProps;
  return (
    <components.DropdownIndicator {...props}>
      {menuIsOpen ? (
        <span role="img" aria-label="up">
          ⬆️
        </span>
      ) : (
        <span role="img" aria-label="down">
          ⬇️
        </span>
      )}
    </components.DropdownIndicator>
  );
};

[Rall3n]

The arrow should should be flipped upside down to indicate that the menu is open and that clicking again will close the menu.

@hichemfantar Isn't the open menu indication enough that the menu is in fact open?

Besides this is a matter of design, not functionality, and can be easily implemented using either a custom component (as @manjushsh suggested) or setting a custom style for the DropdownIndicator component:

<Select
  styles={{
    dropdownIndicator: (provided, { selectProps }) => ({
      ...provided,
      transform: `rotate(${selectProps.menuIsOpen ? 180 : 0}deg)`
    })
  }}
/>

[manjushsh]

This is also a great solution! Thanks!

[hichemfantar]

I realize it's easy to add this feature using styling but I thought it would be nice if it was a built-in prop.
On second thought, it may be better if the implementation is left to the user using custom css.
Thanks for the solutions though.