React: Ошибка: выделение DOM DevTools зависает после длительного наведения

Более простой способ вызвать это:

1. Щелкните, чтобы выбрать элемент в дереве компонентов
2. Переместите указатель мыши за пределы DevTools
3. Щелкните стрелку вверх или вниз

Теперь выделение будет «держаться», пока вы не сосредоточитесь на чем-то другом в DevTools.

TBH, на мой взгляд, это ожидаемое поведение, потому что оно соответствует тому, что делает панель элементов браузера, пока собственный элемент либо завис, либо сфокусирован. ¹

Если бы мы хотели, мы могли бы включить автоматическое скрытие через пару секунд, обновив Tree ...
https://github.com/facebook/react/blob/95bd7aad7daa80c381faa3215c80b0906ab5ead5/packages/react-devtools-shared/src/devtools/views/Components/Tree.js#L207 -L223

... также передать hideAfterTimeout: true как SelectedElement ...
https://github.com/facebook/react/blob/95bd7aad7daa80c381faa3215c80b0906ab5ead5/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js#L75 -L89

¹ Одно небольшое, но, возможно, важное различие между ними заключается в том, что панель собственных элементов, похоже, не оставляет «застрявшего» выделения на мыши. Может быть, он более надежно обнаруживает мышь, выходящую за рамки всего инструментария разработчика? Может, мы могли бы как-нибудь сделать это лучше?

Независимо от ожидаемого поведения или нет, поведение Firefox и Chrome несовместимо, поскольку выделение не застревает в Firefox.

Одно небольшое, но, возможно, важное различие между ними заключается в том, что панель собственных элементов, похоже, не оставляет «застрявшего» выделения на мыши.

Не уверен, что понимаю - именно об этом я и писал. :-) Так что да, я думаю, что это важное различие. Я сталкиваюсь с этой проблемой каждый день.

... чтобы также передать hideAfterTimeout: true, как это делает SelectedElement ...

Похоже, что через несколько секунд подсветка всегда удаляется. Таким образом, это решило бы эту проблему, но сделало бы другой случай хуже. Мне это не кажется приемлемым решением.

В идеале все, что мне нужно, - это надежное удаление выделения в тот самый момент, когда я помещаю курсор за пределы DevTools . Прямо как родной.

Я понимаю, что есть крайние случаи, такие как «что, если я продолжу использовать клавиатуру», но я не нажимаю их все время. Напротив, я ударяя эту конкретную ошибку (непоследовательно сброс выделения для на отведении указателя мыши) каждый день много раз.

Я провел здесь полчаса и не имею даже отдаленного представления, почему мероприятие не сработало. Спросим в твиттере. https://twitter.com/dan_abramov/status/1222178476817633282

Я упомянул об этом в Твиттере , но я покопался в исходниках инструментов разработчика, чтобы выяснить, как они обрабатывают движение мыши и выделяют элементы DOM.

Похоже, что основное место, где devtools обновляет состояние зависания, находится в их обработчике _onmousemove . Эта функция, в свою очередь, вызывает _highlightTreeElement, на который, что интересно, не ссылается никакой другой обработчик событий.

Несколько других методов ( _onfocusout , _onmouseleave , _ondragstart и _reset ) вызывают SDK.OverlayModel.hideDOMNodeHighlight() который, как следует из названия, удаляет выделить с главной страницы.

РЕДАКТИРОВАТЬ: Забыл упомянуть, что я хотел вызвать другой набор обработчиков событий, поскольку текущая реализация itemData, похоже, привязана к onMouseMove и onMouseLeave в данный момент. Дополнительные события, которые наблюдает devtools, также могут сделать вещи немного более надежными, если вас беспокоит перетаскивание или дополнительная обработка смены фокуса.