Support css transitions for menu open/close

I’m very new to react and react-select, but it seems to me that the strategy of removing the .Select-outer-menu node instead of just styling it as invisible (or doing a getComputedStyle() trick plus styling for dom performance) interferes with css transitions for animating the opening and closing of the menu items.

Can it please somehow support animated transitions when opening and closing the menu?

[sag1v]

@ptimson No, not something that fully works (without changing the source code of course). I’m not sure but maybe the new version Select 2.0 is supporting transition or animation out of the box. Maybe @JedWatson can shed some light on this.

[wongsynee]

So what I did to have the animation on the menu is to customise the Menu component entirely. Below is my working code, (I am using CSS modules here):

// JS file
// Need to import components from React-Select.
import Select, { components } from 'react-select'

const Menu = props => {
  return (
    <Fragment>
      <components.Menu {...props} className={styles.menu}>
        {props.children}
      </components.Menu>
    </Fragment>
  )
}

export default () => (
  <Select
    id={genID}
    options={listItems}
    className={styles.select}
    classNamePrefix="select"
    defaultMenuIsOpen={false}
    placeholder={placeholder}
    onChange={this.handleOnChange}
    blurInputOnSelect={false}
    tabSelectsValue={false}
    menuShouldScrollIntoView={true}
    components={{ Menu }}
  />
)

// CSS Modules
.menu {
    animation: fade--in .2s ease-in-out;
}

@keyframes fade--in {

    0% {
        opacity: 0;
        transform: translateY(5rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

Hope that helps anyone who has stumbled across this.