getSize() throws error on getBoundingClientRect

[don-p]

Seems related to: https://github.com/martinnov92/React-Splitters/issues/9

I see this error when resizing the browser window, in a view that contains a second instance of Splitter:

Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null
    at Splitter._this.getSize (Splitter.js:205)

From what I can see, this may be a problem with multiple instances of the Splitter object in one application. For example, in my application I have two main tabs which each contain a Splitter. I see that the Splitter.componentDidMount adds a window resize event listener, that calls _this.getSize. It seems to me that this could cause a problem, since only the currently-rendered object should be responding to window.resize events.

And, a non-rendered Splitter object will have a null reference to its paneWrapper property -

      ref: function ref(node) {
        return _this.paneWrapper = node;
      }

@martinnov92 Have you tested this component in a case like this, with two instances of Splitter in visible and hidden parent tabs?

Thanks, Don

[JeanBeaurepaire]

Any update of this issue ?

[MarinaGurevich]

I am also getting this issue with just one splitter.

[Revathigb]

@martinnov92 I'm also getting the same error when splitter is visible and parent component is visible.

[martinnov92]

Hello, I will look at this very soon. Thank you for your patience.

[michael-whi]

Hi! Thank you for the best splitter!

We did some research with @arch7tect and noticed, that this error relates to window.addEventListener('resize', this.getSize);. When the splitter is unmounted, the window resizer listener still exists. Addition window.removeEventListener('resize', this.getSize); in componentWillUnmount has to resolve the problem.
#22

[phoon0901]

Hi! Thank you for the best splitter!

We did some research with @arch7tect and noticed, that this error relates to window.addEventListener('resize', this.getSize);. When the splitter is unmounted, the window resizer listener still exists. Addition window.removeEventListener('resize', this.getSize); in componentWillUnmount has to resolve the problem. #22

Is version 1.2 include this update? I meet this error also when I npm latest version

[michael-whi]

Hi! Thank you for the best splitter! We did some research with @arch7tect and noticed, that this error relates to window.addEventListener('resize', this.getSize);. When the splitter is unmounted, the window resizer listener still exists. Addition window.removeEventListener('resize', this.getSize); in componentWillUnmount has to resolve the problem. #22

Is version 1.2 include this update? I meet this error also when I npm latest version

No, it doesn't. The pull request is still opened, unfortunately.

[phoon0901]

Hi! Thank you for the best splitter! We did some research with @arch7tect and noticed, that this error relates to window.addEventListener('resize', this.getSize);. When the splitter is unmounted, the window resizer listener still exists. Addition window.removeEventListener('resize', this.getSize); in componentWillUnmount has to resolve the problem. #22

Is version 1.2 include this update? I meet this error also when I npm latest version

No, it doesn't. The pull request is still opened, unfortunately.

Anyway to directly use this? I directly added componentWillUnmount into Splitter.tsx in component folder but it is not worked.

[michael-whi]

Hi! Thank you for the best splitter! We did some research with @arch7tect and noticed, that this error relates to window.addEventListener('resize', this.getSize);. When the splitter is unmounted, the window resizer listener still exists. Addition window.removeEventListener('resize', this.getSize); in componentWillUnmount has to resolve the problem. #22

Is version 1.2 include this update? I meet this error also when I npm latest version

No, it doesn't. The pull request is still opened, unfortunately.

Anyway to directly use this? I directly added componentWillUnmount into Splitter.tsx in component folder but it is not worked.

As a workaround, you can create a custom splitter and extend m-react-splitter, then define listener removing in componentWillUnmount. Something like that:

import Splitter from 'm-react-splitters'

export default class CustomSplitter extends Splitter {
    componentWillUnmount() {
        window.removeEventListener('resize', this.getSize);
    }
}

[ghost]

Hi all, i can solved this issue. If anyone still facing this issue please mail me "[email protected]"