Uncaught TypeError: Cannot read property 'clientWidth' of null

[codefarmerricky]

I make a dynamic scrollbar to load users in my project, it will call serverice to get more users every time when I scroll to the bottom like below code block.

constructor(props) {
        super(props);

        this.state = {
            users: this.props.users ? [...this.props.users] : [],
            isBusy: true
        };
        this.lastScrollTop = 0;
        this.onScroll = this.onScroll.bind(this);
    }
onScroll(evt) {
        const scrollTop = evt.target.scrollTop;
        const clientHeight = evt.target.clientHeight;
        const scrollHeight = evt.target.scrollHeight;
        if (clientHeight + scrollTop === scrollHeight) {
            if (this.props.getUsers && this.hasNextPage) {
                this.lastScrollTop = scrollTop;
                this.props.getUsers(Id, this.pageIndex, this.state.searchText);
            }
        }
    }

And in componentWillReceiveProps I update the users in state

componentWillReceiveProps(nextProps) {
        if (this.props.users !== nextProps.users) {
            let users = this.state.usersAndGroups.concat(nextProps.usersAndGroups);
            this.setState({ users , isBusy: false });
        }
    }

Then in i will set the scrollbar to last scroll position

componentDidUpdate() {
        if (this.scrollbar) {
            this.scrollbar.scrollTop(this.lastScrollTop);
        }
    }

Then render it

<ScrollBar
                            style={{ width: '100%', height: '100%' }}
                            onScroll={this.onScroll}
                            ref={(scrollbar) => { this.scrollbar = scrollbar; }}>
                            <div>
                                {this.renderUserList(users)}
                            </div>
                        </ScrollBar>

All works well except it will throw below error in console when I scroll to the bottom to load next page users.

Uncaught TypeError: Cannot read property 'clientWidth' of null
at getInnerWidth
    at Scrollbars._update

And in the callstack is that el is null when get clientWidth el.clientWidth, anyone konw reason?

function getInnerWidth(el) {
                var clientWidth = el.clientWidth;

                var _getComputedStyle = getComputedStyle(el),
                    paddingLeft = _getComputedStyle.paddingLeft,
                    paddingRight = _getComputedStyle.paddingRight;

                return clientWidth - parseFloat(paddingLeft) - parseFloat(paddingRight);
            }`

[guillaume86]

I had a similar error in Edge when unmounting the component in response to a window resize. I fixed it in my fork here: https://github.com/guillaume86/react-custom-scrollbars There's more details in the diff if anyone is interested.

[cdreve]

@guillaume86 Could you make a pull request with the fix so it can be added to this repo as well?

[guillaume86]

A pull request from my fork would not be accepted because I also added a bunch of build artifacts to the repo (time constraints).

Important changes are in the index.js, feel free to do a proper PR: https://github.com/guillaume86/react-custom-scrollbars/commit/206c0be2d6e6d868e622935beccb27b6166de1cc#diff-56dac60181e52c3433963016d0092037

[SpencerLynn]

I am also seeing this issue. Are there any plans to accept either of those PRs that resolve this issue? Thanks in advance!

[SpencerLynn]

It appears this library has been largely abandoned, as the last commit was in October of 2017. Perhaps it's time to look at forking this library and publishing under another name?

Unless @malte-wessel has further comment?

[pratikt-cuelogic]

any updates here guys.. @malte-wessel , please help us by merging the associated MR

[kartikag01]

since @lamhieu-vk have fix this bug in his repo and PR still no merged. So i have forked into repo https://github.com/kartikag01/react-custom-scrollbars/ and published it under https://www.npmjs.com/package/@kartikag01/react-custom-scrollbars

npm i @kartikag01/react-custom-scrollbars --save