React-select: Preact with v2 : Uncaught TypeError: Cannot read property 'scrollTop' of null

[HadrienPierart]

Hi there,

First of : great project and awesome work. I've been using it for quite some time now in multiple projects, and rarely had any problem.
Now I'm testing the v2 with my Preact project and finding some weird behaviour / errors.
The component works as expected, most of the time, but when I select a value and scroll again in the dropdown menu, the error "Uncaught TypeError: Cannot read property 'scrollTop' of null" gets spammed in the console.

I'd love to add a plunker to reproduce, but its quite a pain to get it to work with preact and react select dependencies, right in the live html page...

Also I know it's in Preact not and directly React, I've used this lib in preact before and didnt have any trouble. Plus, Preact is being used more and more so I figured it might be worth reporting as it seems to be linked to the use of refs with a particular syntax.
My usage is very basic, so it does not seem to be an issue related to some exotic config of the component :

        <ReactSelect
          options={options}
          styles={{
            option: (styles, {data, isSelected, isFocused}) => {
              return ({
                ...styles,
                backgroundColor: (isSelected || isFocused) ? '#EEE' : '#FFF',
                color: '#444',
                textAlign: 'left'
              })
            }
          }}
        />

[HadrienPierart]

It's been more than a month, the issue is still present in the .7 of the beta. Any idea ?

[webschik]

I have the same problem, as a temporary fix I use the next solution:

// webpack.config.js
{
    test: /react-select\/dist\/react-select.esm.js/,
    exclude: [],
    loader: path.resolve('dev-tools/webpack/loaders/react-select-loader.js') //  your custom loader
}

// dev-tools/webpack/loaders/react-select-loader.js

// quick fix for https://github.com/JedWatson/react-select/issues/2651
module.exports = function reactSelectLoader (source) {
    return source
        .replace(' _this$scrollTarget = _this.scrollTarget,', ' _this$scrollTarget = event.currentTarget,')
        .replace(' target = _this.scrollTarget;', ' target = event.currentTarget;');
};

[webschik]

@JedWatson, @jossmac what do you think about adding this fix to the library? I can create a PR

[olpeh]

Hello, we were facing the exactly same issue (Preact + react-select), and used patch-package to add the fixes suggested by @webschik directly to the library's code.

https://github.com/ds300/patch-package

[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!