Incompatibility with react-select

[zannix]

When using both react-select and react-alert in the same component, react-alert shows the alert twice instead of once.

import React, { Component } from 'react'
import Select from 'react-select';
import { withAlert } from 'react-alert'

class MyComponent extends Component {
    constructor (props) {
        super(props);

        this.flash=this.flash.bind(this);

    }

    flash()
    {
        this.props.alert.error("HA");
    }

    render () {

        return (
            <div>
                <Select/>
                <a onClick={this.flash}>Click me</a>
            </div>
        );
    }
}

export default withAlert(MyComponent);

React select lib: https://github.com/JedWatson/react-select

[besLisbeth]

@zannix, thank you for the issue! Yes, somehow react-select create a transition bug for the alert. You can try to use

transition: transitions.FADE

from the Options part, while I'll post the pull request with the fix. Transition fade works as it should.

[zannix]

You're the best

[besLisbeth]

@zannix, I found an answer to your question! If you need the scale transition, then you should pass an option isSearchable={false} to the <Select/> component. Please, have a look at https://github.com/JedWatson/react-select/issues/165

[zannix]

@besLisbeth what if I need the select to be searchable?

[besLisbeth]

@zannix it looks like they have a bug in their package for almost three years. I added a link to the open issue - many people have the same problem