Typing out values instead of just selecting them causing space between input and menu

[ryanzec]

So it was mentioned in the #999 PR about an issue with a space between the input and menu (and this issue is existing, not related to that PR) and I want to give some more insight I noticed about this issue.

First I want to point out that I testing this on Chrome, Safari, FireFox, and IE 10 and oddly enough, I only noticed this issue in Chrome.

This issue seems to happen when the user types the value more instead of just selecting a value. Here is an existing example selecting 3 items and everything works fine:

Here is me selecting the same 3 items for the example except I am typing out the value before selecting them:

For whatever reason when I type the value out, the main element (.Select) seems to think it is taller than it should be as soon as some causing the component to rendering again, it fixes itself.

[ryanzec]

Ok, so I did some investigation and that only thing that made sense to me was that the value of the input and the tag was appearing in the input at the same time causing the input to briefly become multiple lines and for whatever reason, Chrome was not re-sizing the height of the element. once the input value was cleared out As an experiment, I change the follow code:

selectValue (value) {
    this.hasScrolledToOption = false;
    if (this.props.multi) {
        this.addValue(value);
        this.setState({
            inputValue: '',
            focusedIndex: null
        });
    } else {
        this.setState({
            isOpen: false,
            inputValue: '',
            isPseudoFocused: this.state.isFocused,
        });
        this.setValue(value);
    }

to

selectValue (value) {
    this.hasScrolledToOption = false;
    if (this.props.multi) {
        this.setState({
            inputValue: '',
            focusedIndex: null
        }, () => {
            this.addValue(value);
        });
    } else {
        this.setState({
            isOpen: false,
            inputValue: '',
            isPseudoFocused: this.state.isFocused,
        }, () => {
            this.setValue(value);
        });
    }
}

In this code, the tag is not added until the input value is cleared and that seemed to fix the issue. I tested this code in all the browsers I previously did and everything seems to work perfectly. I also re-ran the tests and everything passes there too (except the one test that is still using the old wrapper.setPropselectorChild that does not exist).

@JedWatson This seems a bit quirky that this change is needed to fix Chrome however I don't see any issues with have this code and since it fixes the problem, it seems like a good way to fix this issue. I would be happy to make a PR with this change if you feel it is a good way to resolve this issue?

[ryanzec]

@JedWatson While I decided to just submit the PR #1048 anyways as I needed it for the custom build that I am currently working with that has the allowCreate PR too.