react-component / react-component/tooltip

TypeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'. in `monitorResize`

Aperta
#239 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Lingua principale
TypeScript
Stelle
944
Fork
199
Merge medio
19h 1m
PR unite (30g)
3

Descrizione

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();
    }
    ;
}

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia in util.js, in monitorResize, e ispeziona la chiamata da Align.js:110; riproduci l’interazione di hover descritta nell’issue e conferma quale valore raggiunge ResizeObserver.observe. Il lavoro è completato quando il percorso di hover non genera più il TypeError segnalato; nell’issue non è indicato alcun file di test.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
javascript, react
Ambito
frontend
Tipo di issue
Bug
Difficoltà
2/5
Tempo stimato
1-3 ore
Stato di attività
Ferma
Chiarezza
Da chiarire
Idoneità per principianti
25/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.