React: バグ:DevTools DOMの強調表示が、長時間のホバー後にスタックする

作成日 2020年01月16日  ·  6コメント  ·  ソース: facebook/react

再現する手順

  1. DevToolsでコンポーネントにカーソルを合わせる
  2. 1秒ほどホバリングし続けます
  3. 他に何も置かずに、カーソルをDevToolsからすばやく移動します

予想:DOMの強調表示がなくなります。
実際:DOMの強調表示が動かなくなってしまいます。

Developer Tools Bug

最も参考になるコメント

これについてはTwitterで言及し

devtoolsがホバー状態を更新する主な場所は_onmousemoveハンドラーにあるようです。 この関数は、興味深いことに、他のイベントハンドラーによって参照されない_highlightTreeElementを呼び出します。

他のいくつかのメソッド( _onfocusout_onmouseleave_ondragstart 、および_reset )はSDK.OverlayModel.hideDOMNodeHighlight()を呼び出します。これは、名前が示すように、メインページからハイライトします。

編集: itemDataの現在の実装はonMouseMoveonMouseLeaveにバインドされているように見えるため、イベントハンドラーのさまざまなセットを呼び出したいと言ったことを忘れました。 devtoolsが監視する追加のイベントは、ドラッグやフォーカス変更の処理が気になる場合に、物事を少し堅牢にする可能性もあります。

全てのコメント6件

これをトリガーする簡単な方法:

  1. コンポーネントツリーで要素をクリックして選択します
  2. DevToolsの外にマウスを移動します
  3. 上矢印または下矢印をクリックします

DevToolsで他の何かに焦点を合わせるまで、ハイライトは「固執」します。

TBHこれは、ネイティブ要素がホバーまたはフォーカスされている限り、ブラウザーの要素パネルの動作と一致するため、私の考えでは予想される動作です。 1

必要に応じて、 Tree更新することで、数秒後に自動非表示を有効にすることができます...
https://github.com/facebook/react/blob/95bd7aad7daa80c381faa3215c80b0906ab5ead5/packages/react-devtools-shared/src/devtools/views/Components/Tree.js#L207 -L223

... SelectedElementようにhideAfterTimeout: trueも渡す...
https://github.com/facebook/react/blob/95bd7aad7daa80c381faa3215c80b0906ab5ead5/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js#L75 -L89

1 2つの小さな、しかしおそらく重要な違いの

強調表示がFirefoxでスタックしないため、FirefoxとChromeの間の動作が予期される動作であるかどうかに一貫性がありません。

2つの小さな、しかしおそらく重要な違いの1つは、ネイティブ要素パネルがマウスの「スタック」ハイライトを残していないように見えることです。

私が理解しているかどうかはわかりません—これはまさに私が問題を提起したものです。 :-)そうです、それは重要な違いだと思います。 私は毎日この問題にぶつかっています。

... hideAfterTimeoutも渡す:SelectedElementのようにtrue ...

それは、数秒後に常にハイライトを削除するように聞こえます。 したがって、この問題は解決されますが、他のケースを悪化させることによって。 それは私には受け入れられる解決策のようには思えません。

理想的には、カーソルをDevToolsの外に置いた瞬間に、強調表示を確実に削除することだけが必要です。 ネイティブのものと同じように。

「キーボードを使い続けるとどうなるか」などのエッジケースがあることは理解していますが、いつもヒットしているわけではありません。 対照的に、私毎日何度もこの特定のバグ(マウスアウトの強調表示を一貫してリセットしない)にぶつかっています。

私はここで30分過ごしましたが、なぜイベントが発生しないのかについての遠い考えすらありません。 ツイッターで聞いてみましょう。 https://twitter.com/dan_abramov/status/1222178476817633282

これについてはTwitterで言及し

devtoolsがホバー状態を更新する主な場所は_onmousemoveハンドラーにあるようです。 この関数は、興味深いことに、他のイベントハンドラーによって参照されない_highlightTreeElementを呼び出します。

他のいくつかのメソッド( _onfocusout_onmouseleave_ondragstart 、および_reset )はSDK.OverlayModel.hideDOMNodeHighlight()を呼び出します。これは、名前が示すように、メインページからハイライトします。

編集: itemDataの現在の実装はonMouseMoveonMouseLeaveにバインドされているように見えるため、イベントハンドラーのさまざまなセットを呼び出したいと言ったことを忘れました。 devtoolsが監視する追加のイベントは、ドラッグやフォーカス変更の処理が気になる場合に、物事を少し堅牢にする可能性もあります。

このページは役に立ちましたか?
0 / 5 - 0 評価