React-select: [V2] IE11 vertical scrollbar

[rogier2012]

Opening the first select component of the demo page in Internet Explorer 11 shows a scrollbar, but clicking on this scrollbar closes the selector menu.

[4dom2dom]

I have the same issue in IE11. Hope it will be get soon carried out. Do you have any idea to make a quick fix?

[4dom2dom]

The issue is discussed here https://github.com/JedWatson/react-select/issues/1020. Unfortunately, it is not fixed.

[andrey99z]

Here is quick patch for current version based on Rakid's code:

   componentDidMount() {
        const select = this.rs.select;
        if (!select.onInputBlurPatched) {
            const originalOnInputBlur = select.onInputBlur;
            select.onInputBlur = e => {
                if (select.menuListRef && select.menuListRef.contains(document.activeElement)) {
                    select.inputRef.focus();
                    return;
                }
                originalOnInputBlur(e);
            }
            select.onInputBlurPatched = true;
        }
    }

(assuming that this.rs is ref to React-select component)
HTH

[pohsoon]

Nice. This quick patch works in my IE 11.

[M-Yankov]

Here is quick patch for current version based on Rakid's code:

   componentDidMount() {
        const select = this.rs.select;
        if (!select.onInputBlurPatched) {
            const originalOnInputBlur = select.onInputBlur;
            select.onInputBlur = e => {
                if (select.menuListRef && select.menuListRef.contains(document.activeElement)) {
                    select.inputRef.focus();
                    return;
                }
                originalOnInputBlur(e);
            }
            select.onInputBlurPatched = true;
        }
    }

(assuming that this.rs is ref to React-select component)
HTH

The code works good, but in my case I am using react-window to replace the MenuList component. In that case select.menuListRef is always null. Any idea how to fix this ?

Edit:

Actually I need to set the innerRef in the react-select. innerRef in that case means MenuListRef.

Here is what I have:

import { FixedSizeList as List } from 'react-window';

class MenuList extends React.Component {
  render() {
    return (
        <List
          outerRef={this.props.innerRef} // I needed only this row
          height={this.props.maxHeight}
          itemCount={this.props.children.length}
          itemSize={this.props.rowHeight}
      >
          {({ index, style }) => <div style={style}>{this.props.children[index]}</div>}
      </List>);
  }
}

export default MenuList;

And I use the react-select like:

import Select from 'react-select';
import MenuList from  '../../MenuList'

<Select
   components={ MenuList }
   // ...
>

Note:

The code in quotes was already implemented in react-select and I don't need it.

[andrey99z]

Upgrade to the current version? This seem to be fixed now and the patch is not needed anymore.

[M-Yankov]

Upgrade to the current version? This seem to be fixed now and the patch is not needed anymore.

Yes it's fixed, I was editing my previous comment with the solution I found, but obviously I forgot to click save 🤓 _(Grateful that my browser keeps tabs and input data cached, bеcause electricity was accidentally stopped 😄 )_

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

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.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

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!