whoisandy / react-rangeslider

A lightweight responsive react range slider component.A fast & lightweight react component as a drop in replacement for HTML5 input range slider element.
https://whoisandy.github.io/react-rangeslider/
MIT License
641 stars 235 forks source link

TypeError: Cannot read property 'getBoundingClientRect' of null #146

Open darthzeran opened 4 years ago

darthzeran commented 4 years ago

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?

BarrBozzO commented 4 years ago

Same issue for me. Any progress?

darthzeran commented 3 years ago

i doubt it

QuirkWebDevelopment commented 3 years ago

I have the same issue and no resolution.

QuirkWebDevelopment commented 3 years ago

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;
  }`