React: Error: el resaltado DOM de DevTools se atasca después de un desplazamiento prolongado

Una forma más fácil de activar esto:

1. Haga clic para seleccionar un elemento en el árbol de componentes
2. Mueva su mouse fuera de DevTools
3. Haga clic en la flecha hacia arriba o hacia abajo

El resaltado ahora se "pegará" hasta que se enfoque en otra cosa en DevTools.

TBH, este es un comportamiento esperado en mi mente, porque coincide con lo que hace el panel Elementos del navegador siempre que un elemento nativo esté flotando o enfocado. ¹

Si quisiéramos, podríamos habilitar la ocultación automática después de un par de segundos actualizando Tree ...
https://github.com/facebook/react/blob/95bd7aad7daa80c381faa3215c80b0906ab5ead5/packages/react-devtools-shared/src/devtools/views/Components/Tree.js#L207 -L223

... para pasar también hideAfterTimeout: true como SelectedElement hace ...
https://github.com/facebook/react/blob/95bd7aad7daa80c381faa3215c80b0906ab5ead5/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js#L75 -L89

¹ Una pequeña pero quizás importante diferencia entre los dos es que el panel de elementos nativos no parece dejar el resaltado "atascado" en el mouse. ¿Quizás es más confiable detectar que el mouse abandona todos los límites de las herramientas de desarrollo? ¿Quizás podríamos hacerlo mejor de alguna manera?

Si su comportamiento esperado o no, el comportamiento entre Firefox y Chrome es inconsistente ya que el resaltado no se atasca en Firefox.

Una pequeña pero quizás importante diferencia entre los dos es que el panel de elementos nativos no parece dejar el resaltado "atascado" en el mouse.

No estoy seguro de haberlo entendido: esto es exactamente por lo que presenté el problema. :-) Entonces sí, creo que es una diferencia importante. Estoy abordando este problema todos los días.

... para pasar también hideAfterTimeout: true como lo hace SelectedElement ...

Parece que siempre eliminaría el resaltado después de unos segundos. Entonces resolvería este problema, pero empeorando el otro caso. Eso no me parece una solución aceptable.

Idealmente, todo lo que quiero es que el resaltado se elimine de manera confiable en el mismo momento en que coloco el cursor fuera de DevTools . Como hace el nativo.

Entiendo que hay casos extremos como "¿y si sigo usando el teclado?", Pero no los uso todo el tiempo. Por el contrario, estoy golpeando este error en particular (restablecer inconsistentemente el resaltado en el mouseout) todos los días muchas veces.

Pasé media hora aquí y no tengo ni una idea remota de por qué el evento no se dispara. Preguntémosle a twitter. https://twitter.com/dan_abramov/status/1222178476817633282

Mencioné esto en Twitter , pero busqué en la fuente de devtools para descubrir cómo manejaban el movimiento del mouse y resaltaban los elementos DOM.

Parece que el lugar principal donde devtools actualiza el estado de desplazamiento es en su controlador _highlightTreeElement al que, curiosamente, ningún otro controlador de eventos hace referencia.

Algunos otros métodos ( _onfocusout , _onmouseleave , _ondragstart y _reset ) llaman a SDK.OverlayModel.hideDOMNodeHighlight() que, como su nombre indica, elimina el resaltar de la página principal.

EDITAR: Olvidé mencionar que quería llamar a los diferentes conjuntos de controladores de eventos ya que la implementación actual de itemData parece enlazarse a onMouseMove y onMouseLeave en este momento. Los eventos adicionales que observa devtools también pueden hacer que las cosas sean un poco más sólidas en caso de que el arrastre o el manejo de cambios de enfoque sean una preocupación para usted.