react-rangeslider icon indicating copy to clipboard operation
react-rangeslider copied to clipboard

TypeError: Cannot read property 'getBoundingClientRect' of null

Open darthzeran opened this issue 5 years ago • 4 comments

I am still investigating whether or not my code caused this, but it seems that there is never a check to prevent node from being null

 var node = _this.slider;
      var coordinateStyle = constants.orientation[orientation].coordinate;
      var directionStyle = reverse ? constants.orientation[orientation].reverseDirection : constants.orientation[orientation].direction;
      var clientCoordinateStyle = 'client' + (0, _utils.capitalize)(coordinateStyle);
      var coordinate = !e.touches ? e[clientCoordinateStyle] : e.touches[0][clientCoordinateStyle];
      var direction = node.getBoundingClientRect()[directionStyle];

Is this expected behavior from rangeslider?

I have successfully recreated my error, as it only happens when my react component disappears (because it gets turned off and gets replaced). Is there a way I can prevent this error from happening?

darthzeran avatar Nov 07 '19 19:11 darthzeran

Same issue for me. Any progress?

BarrBozzO avatar Jun 29 '20 08:06 BarrBozzO

i doubt it

darthzeran avatar Oct 02 '20 18:10 darthzeran

I have the same issue and no resolution.

QuirkWebDevelopment avatar Mar 17 '21 15:03 QuirkWebDevelopment

Per Darthzeran's observation, I tried adding a check and it indeed fixed the error for me.

Starting around line 194 in the _this.position function:

` if(_this.slider) {

    var node = _this.slider;
    var coordinateStyle = constants.orientation[orientation].coordinate;
    var directionStyle = reverse ? constants.orientation[orientation].reverseDirection : constants.orientation[orientation].direction;
    var clientCoordinateStyle = 'client' + (0, _utils.capitalize)(coordinateStyle);
    var coordinate = !e.touches ? e[clientCoordinateStyle] : e.touches[0][clientCoordinateStyle];
    var direction = node.getBoundingClientRect()[directionStyle];
    var pos = reverse ? direction - coordinate - grab : coordinate - direction - grab;
    var value = _this.getValueFromPosition(pos);

    return value;
  }`

QuirkWebDevelopment avatar Mar 17 '21 16:03 QuirkWebDevelopment