#594 and #589 Fixes navigation issues with non-searchable controls

[MrLeebo]

Issue: #594 and #589

For non-searchable controls, I replaced the placeholder <div/> with a readonly <input/> that has a tabIndex and onfocus / onblur callbacks. It receives keyboard navigation and closes when you click the mouse outside of the control.

I added autocomplete and type="search" because my LastPass extension kept trying to treat the input as a password for some reason (not sure why this wasn't happening in searchable controls), so there's probably a smarter way to do that.

[JedWatson]

Looks good, thanks @MrLeebo!

[azaharakis]

Hi guys this doesn't seem quite right to me?
You'll still have the same problem with multi-selects, as that code is short-circuited here:
https://github.com/JedWatson/react-select/blob/master/src/Select.js#L478 before it gets the opportunity to render the input
It seems we want to render the input regardless of what type of control it is perhaps composing the props within the conditions and spreading them into the component based on the requirements. I'll try submitting a PR to show you what i'm thinking.

[MrLeebo]

@azaharakis @JedWatson Wouldn't it be easier to just delete that line?

[MrLeebo]

@azaharakis I'm not opposed to what you're suggesting, I just put up a PR to do the simplest fix so in the mean time there isn't a lingering issue with multi controls.

[azaharakis]

@MrLeebo, I think you're right. I'm new to the codebase, and my initial thought was the final creation of the input props was being done to late, and could reduce duplication by creating the props that get rendered into the input on creation of the control. I'll need to play around a bit more to understand all the options, and if they are required.

[azaharakis]

Testing this fix, i've notice some different issues occurring now. The input field thats created in these dropdowns doesn't have a variable width and causes its container to have a min-width of around 150px depending on how you have setup your sass/less. It also means that there is a cursor thats visible on mobile devices in these select boxes as well as creating large white spaces as it drops down to the next line if it doesn't fit.

[MrLeebo]

Those were non-issues when it was a <div/> but I couldn't get the onFocus and onBlur event handlers to run unless I made it an <input/>, which is weird because you can attach onFocus and onBlur to a div in plain JS no problem, so I'm not sure what the issue is.

[JedWatson]

Sorry for the delay - I've been travelling. Just merged @MrLeebo's second PR, I need to look into this more closely but for the moment I think this makes it better.