Clarify browser support

[JedWatson]

This component is currently only tested in browsers I have on hand; latest Safari, Chrome and Firefox on Mac.

It would be great to get a proper support matrix (and tests) going, so people know what to expect and changes can be tested.

None of the javascript involved is particularly special, and we avoided fancy css as well (e.g. flex-box layout) that would have blocked older browsers, so in theory it should be as well supported as React is, and hopefully any issues will be only css / style related.

[nchase]

Works as expected in IE11.

[Helenka]

some notes about working in IE (9+):
There is a bug when trying to use scrollbar up/down/thumb buttons in drop-down select menu. The menu disappears immediately and doesn't allow to choose or view something.

[JedWatson]

Thanks for the report @Helenka, that issue was recently fixed by @rovolution with #98

[flodiebold]

The bug mentioned by @Helenka seems to have either reappeared or not been completely fixed. I can reproduce it with react-select 0.6.7 and IE 11. The reason seems to be that clicking the scrollbar causes the input to lose focus, which then causes the menu to close.

(By the way, Microsoft provides nice testing VMs for IE at https://dev.modern.ie/tools/vms/).

[patrickgaskill]

I was able to fix the reappearing IE11 bug that @flodiebold mentioned. Should I create a new issue for it and submit a PR for it?

[Trav84]

@patrickgaskill I'm experiencing this bug as well, would it be possible to see your fix?

[shepmaster]

I am also seeing an issue where one of my 4 Select components immediately closes in IE11. I have yet to determine what makes that one special. @patrickgaskill, is there a chance of seeing what your fix was?

[shepmaster]

what makes that one special

Of course I figure it out immediately... I had a <label> tag wrapped around the component:

<div className="form-part form-state">
  <label>
    <span className="form-label">State of Birth</span>
    <Select searchable={false} clearable={false} name="state" placeholder="STATE" options={STATES} />
  </label>
</div>

Removing the label fixed the janky behavior for me in IE11.

[patrickgaskill]

@shepmaster My fix was for an older version of the code, and none of it seems to apply now, unfortunately. The idea was to stop handleInputBlur from setting isOpen: false directly, and instead call _closeMenuIfClickedOutside. It's been working fine in production for a couple months now.

[FezVrasta]

You may use SauceLabs, I use it successfully for one of my projects, it's fairly easy to setup.

[beeccy]

I also had the same issue as @shepmaster where there was a <label> around a <Select> made the drop down malfunction in IE 11 and by removing the <label> surrounding the <Select> the drop down menu worked properly again.

[JedWatson]

Supported browsers are now IE11+ and "last 2 versions" of everything else, as defined in the .browserslistrc file in v2.

[aashini273]

I am seeing an issue on Chrome browser for Mac OS BigSur where my left padding disappears when I click on dropdown to select an item. Does anyone face similar issue and/or have a fix for this ? Thanks in advance!