react-component / react-component/tooltip
TypeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'. in `monitorResize`
Open
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 944
- Forks
- 199
- Avg merge
- 19h 1m
- Merged PRs (30d)
- 3
Description
The following error happens when hovering an element.
See video: https://youtu.be/-aLHvTHvp7Q
TypeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'.
at ft (util.js:58)
at Align.js:110
at Oi (react-dom.production.min.js:262)
at KqkS.t.unstable_runWithPriority (scheduler.production.min.js:18)
at jl (react-dom.production.min.js:122)
at Ti (react-dom.production.min.js:261)
at pi (react-dom.production.min.js:243)
at react-dom.production.min.js:123
at KqkS.t.unstable_runWithPriority (scheduler.production.min.js:18)
at jl (react-dom.production.min.js:122)
at Hl (react-dom.production.min.js:123)
at $l (react-dom.production.min.js:122)
at De (react-dom.production.min.js:292)
at react-dom.production.min.js:50
at zr (react-dom.production.min.js:105)
at Zt (react-dom.production.min.js:75)
at Jt (react-dom.production.min.js:74)
at KqkS.t.unstable_runWithPriority (scheduler.production.min.js:18)
at Gt (react-dom.production.min.js:73)
at HTMLDivElement.o (helpers.js:72)
Unminified code monitorResize:
export function monitorResize(element, callback) {
var prevWidth = null;
var prevHeight = null;
function onResize(_ref) {
var _ref2 = _slicedToArray(_ref, 1)
, target = _ref2[0].target;
if (!document.documentElement.contains(target))
return;
var _target$getBoundingCl = target.getBoundingClientRect()
, width = _target$getBoundingCl.width
, height = _target$getBoundingCl.height;
var fixedWidth = Math.floor(width);
var fixedHeight = Math.floor(height);
if (prevWidth !== fixedWidth || prevHeight !== fixedHeight) {
// https://webkit.org/blog/9997/resizeobserver-in-webkit/
Promise.resolve().then(function() {
callback({
width: fixedWidth,
height: fixedHeight
});
});
}
prevWidth = fixedWidth;
prevHeight = fixedHeight;
}
var resizeObserver = new ResizeObserver(onResize);
if (element) {
resizeObserver.observe(element); // CRASHES HERE
}
return function() {
resizeObserver.disconnect();
}
;
}
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in util.js at monitorResize and inspect the call from Align.js:110; reproduce the hover interaction described in the issue and confirm what value reaches ResizeObserver.observe. Done means the hover path no longer raises the reported TypeError; no test file is named in the issue.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100