React-select: Dropdown closes when click on scroll in IE11

[tknysh]

[twschiller]

Potential regression of #495?

Related issues:

• #848
• #846

[acromarco]

According to my research, this bug (re-)appeared with IE11 in Win7 after this security update https://support.microsoft.com/en-us/help/4040685/cumulative-security-update-for-internet-explorer
With the new IE11 version 11.0.9600.18816 this bug is reproducible, but everything worked fine with the older version 11.0.9600.17420.

[acromarco]

selectize is also affected by this IE11 bug and they have probably found a fix https://github.com/selectize/selectize.js/issues/1004

[acromarco]

I wonder if this is already fixed with https://github.com/JedWatson/react-select/commit/2da6ff6a352c8720fe59ca037524dbff9109af96 because adding tabIndex={-1} should fix it.

[sushant-at-nitor]

Code on this line should add one more condition to fix this issue.

if (this.menu && (this.menu === document.activeElement || this.menu.contains(document.activeElement))) {

document.activeElement.classList.contains(<configured class name for menu renderer>)

OR

Let this line decide whether to set new state to hide menu options or to continue to show them, stop further execution of code.

const result = this.props.onBlur(event);

if(result === false){
  this.focus();
  return;
}

[stephanebarbey]

Is this issue still open? (or any chance that the fix by sushant-at-nitor gets integrated?)

[jojo-tutor]

just add this "onBlur" handler to the props of Select:

handleOnBlur() {
    const e = null
    throw e
}

[AO17]

if this has been fixed (see merge above):

1. Why is this issue still open?
2. I still have the same issue, if the fix has been merged, why is the bug still occuring?

[maeln]

I can confirm that I have the same issue with the latest version of react-select.
I guess there was a regression with the V2.

[maeln]

To expand on @jojo-tutor "fix-hack", you can do this if you still want your select to close when it lose focus:

 onBlur={() => {
        const focusedElement = document.activeElement
        if (focusedElement.className.includes('<<your-select-class>>')) {
          const e = null
          throw e
        }
}}

But it's a dirty hack, we should find a proper fix.

[AO17]

@JedWatson will this be fixed soon?

[rakid]

Confirm issue with the V2 (using v2.0.0-beta-7), and tested also with v2.0.0-master

Tested in the examples provided by react-select, same issue.

Hope it will be resolved soon.

[rakid]

@JedWatson any suggestions?

[madhan-dhamodaran]

@JedWatson @james4388 @rakid ,

Any updates on @rakid 's merge? This is a blocker for me and I am in need of this for my project.

Please advise.

Thanks,
MAdhan

[ahce]

@JedWatson @gwyneplaine
Please check this.

[blake59]

Any update on this?

[ihor]

Hey guys! Do you have any estimates when the fix will be released? Thanks!

[igorkaine]

+1

[mtunski]

+1

[acromarco]

Should be fixed in v2.1.2 thanks to PR #3013

[MaximeNoulin]

It seems that it (v2.1.2 #3013 ) fixed the sync Select but not the Async one, someone would have any idea why?

[aviranmz]

version 2.4.4 still have the same issue in IE11 -> when the list is open and you try to click on the croll the menu is close - i cant upgrade to v3 - any solution?

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing issues that appear to have been resolved via community comments or issues that are now redundant based on their age.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!

@MaximeNoulin and @aviranmz feel free to open up a new issue if it is still a problem, however note we are focusing on v3 as mentioned above.