Closed webivan1 closed 3 months ago
Can you create a repro with CodeSandbox?
same problem
Same issue - I'm creating and removing these items quickly, it seems that getOffsets is called before trackElement
is created or after it's already removed.
There was a change made that could fix this. Can you try it?
Hey, I'm also having this issue, my current version is ^1.8.3
.
Hey guys, any updates on this? I am still facing this issue in 1.8.14
Seems that the trackRef
ref is not getting set before componentDidMount
is called.
getOffsets
is called inside componentDidMount
and tries to call trackRef.current.getBoundingClientRect()
, but the ref is still null.
The error can be avoided by adding this line to getOffsets
:
if (!trackElement) return [];
Not sure if this might cause issues elsewhere, but from my minimal testing I did not notice anything. There is a similar check already in place in getThumbs
, which would otherwise throw a similar error when trying to reference trackRef.current.children
.
Related: https://stackoverflow.com/a/50019873
@tajo I've created PR #182 with the change I mentioned.
I should note that I was only seeing this error when running snapshot tests with jest/storybook. With this change, I see the warnings but everything renders correctly, which is not ideal better than the tests blowing up 🤷
Patch to apply via patch-package to resolve issue : (waiting for PR to be merged https://github.com/tajo/react-range/pull/182)
react-range+1.8.14.patch
diff --git a/node_modules/react-range/lib/Range.js b/node_modules/react-range/lib/Range.js
index 2403f9d..f276ec3 100644
--- a/node_modules/react-range/lib/Range.js
+++ b/node_modules/react-range/lib/Range.js
@@ -68,6 +68,10 @@ var Range = /** @class */ (function (_super) {
_this.getOffsets = function () {
var _a = _this.props, direction = _a.direction, values = _a.values, min = _a.min, max = _a.max;
var trackElement = _this.trackRef.current;
+ if (!trackElement) {
+ console.warn('No track element found.');
+ return [];
+ }
var trackRect = trackElement.getBoundingClientRect();
var trackPadding = (0, utils_1.getPaddingAndBorder)(trackElement);
return _this.getThumbs().map(function (thumb, index) {
@@ -523,7 +527,9 @@ var Range = /** @class */ (function (_super) {
document.removeEventListener('touchstart', this.onMouseOrTouchStart);
document.removeEventListener('mouseup', this.schdOnEnd);
document.removeEventListener('touchend', this.schdOnEnd);
- this.resizeObserver.unobserve(this.trackRef.current);
+ if (this.trackRef && this.trackRef.current) {
+ this.resizeObserver.unobserve(this.trackRef.current);
+ }
};
Range.prototype.render = function () {
var _this = this;
Hi
I am catching this error when I resize the browser window
Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null at Range._this.getOffsets (Range.js:52) at Range._this.onResize (Range.js:157) at utils.js:151