Barista: [フィルターフィールド] MSEdgeに提案が表示されない

作成日 2020年09月04日  ·  13コメント  ·  ソース: dynatrace-oss/barista

バグレポート


非クロムバージョンのMSEdgeのフィルターフィールドをクリックすると、フィルターの候補は表示されません。 また、入力時に[すべてクリア]ボタンは表示されません。 代わりに、入力をクリアするかなり見栄えの悪い「X」があります(スクリーンショットを参照)。

ただし、これは、アプリがIvyではなくViewEngineでコンパイルされている場合にのみ発生します。

予想される行動


フィルタフィールドをクリックすると、他のブラウザと同様に、候補がドロップダウンコンポーネントに表示されます。

現在の動作


MS Edgeのフィルターフィールドをクリックしても、フィルター候補を含むドロップダウンコンポーネントは開きません。 ドロップダウンの代わりに、小さな境界線が表示されます(スクリーンショットを参照)。

再現する手順


  1. アプリのtsconfigでAngularIvyを無効にします。
  "angularCompilerOptions": {
    "enableIvy": false
  }
  1. 非クロムバージョンのMSEdgeのフィルターフィールドをクリックします。
  2. 提案値は表示されません

コンテキスト(環境)


使用バージョン:

  • 角度:10.0.9
  • @ angular / cdk :10.1.1
  • @ dynatrace / barista-components :8.0.0

添付ファイル

「すべてクリア」の代わりに奇妙なX

image (5)

ドロップダウンはありませんが、境界線が表示されます

image (4)

予想される動作Firefox

image (7)

実際の動作MSEdge

image (6)

bug filter-field has-pr

最も参考になるコメント

Edge <= 16のIntersectionObserverバグのように思われるので、私は現在、これらのブラウザーの強調表示を無効にすることを考えています。 これにより、少なくとも使用可能になります。
plsは私にこの「解決策」についてのあなたの考えを知らせてください。

全てのコメント13件

Windows10マシンのEdge16で調査を行いましたが、オートコンプリートにFilterFieldが何も表示されていません。

image
image

@samuelfahrngruber Edgeバージョン18ではオートコンプリートが正しく表示されるため、動作を再現できません。

@lukasholzer https://barista.dynatrace.com/のサンプルを使用してい
ただし、この問題はバリスタコンポーネントの新しいバージョン8.0.0でのみ発生し、 https: //barista.dynatrace.com/の例ではv8.0.0を使用していません。

現在、フィルターフィールドとバリスタ8.0.0を使用してローカルの例を作成することはできません。これは、ページにフィルターフィールドのみを使用して新しいプロジェクトを作成すると、常にエラーメッセージが表示されるためです。

ERROR in node_modules/@dynatrace/barista-components/button-group/src/button-group.d.ts:35:9 - error TS2611: 'disabled' is defined as a property in class 'HasTabIndex & DtButtonGroupBase', but is overridden here in 'DtButtonGroup<T>' as an accessor.
35     get disabled(): boolean;
           ~~~~~~~~
node_modules/@dynatrace/barista-components/button-group/src/button-group.d.ts:76:9 - error TS2611: 'disabled' is defined as a property in class 'HasTabIndex & CanColor<DtButtonGroupThemePalette> & DtButtonGroupItemBase', but is overridden here in 'DtButtonGroupItem<T>' as an accessor.
76     get disabled(): boolean;
           ~~~~~~~~

この問題について別のバグを報告する必要がありますか?

また、MS Edgeではまったく機能しないため、stackblitzの例を提供することはできません。

編集:私はこの問題のバグを作成しました#1577

Edgeのdt-highlight問題のようです。

オートコンプリートのすべてのオプション内で使用されるハイライトコンポーネントは、ハイライトされたテキストをレンダリングしません。

ハイライトコンポーネントで使用されている「IntersectionObserver」に関連しているようです。 オーバーレイが開き、最初のオプションが表示されるようになると、最初のレンダリング後、オブザーバーはエッジで起動しません。

他のすべてのブラウザは意図したとおりに機能します。
奇妙なことに、Edge 15以降IntersectionObserverがサポートされています。

この問題は、バージョン7.5.1から8.0.0に更新した後に発生しますが、以前は問題はありませんでした。

現在、これが、このコード領域が最後に触れられた問題#1420(PR#1433)に何らかの形で関連しているかどうかを確認しています。

Edge <= 16のIntersectionObserverバグのように思われるので、私は現在、これらのブラウザーの強調表示を無効にすることを考えています。 これにより、少なくとも使用可能になります。
plsは私にこの「解決策」についてのあなたの考えを知らせてください。

私には合理的に聞こえます-私はそれに投票します。

Edge <= 16のIntersectionObserverバグのように思われるので、私は現在、これらのブラウザーの強調表示を無効にすることを考えています。 これにより、少なくとも使用可能になります。
plsは私にこの「解決策」についてのあなたの考えを知らせてください。

たぶん、他の非クロムエッジバージョンにも当てはまります。
私にとって、この問題はEdge18でも発生します。

正確なバージョン:

Microsoft Edge 44.19041.423.0
Microsoft EdgeHTML 18.19041

良い点-私のテストでも同じです。

{browserName:MicrosoftEdge、browserVersion:44.18362.449.0、javascriptEnabled:true、pageLoadStrategy:normal、platform:WINDOWS、platformName:WINDOWS、setWindowRect:false、timeouts:{implicit:0、pageLoad:300000、script:30000} 、、 zal: screenResolution :1600x1200、 zal:tz :ヨーロッパ/ウィーン}

ブラウザでサポートされていないのに、なぜそれを使用したのか疑問に思っています。 🤔AFAIKはすべてのエッジバージョンをサポートする必要がありますか?
https://caniuse.com/intersectionobserver

@thomaspinkこのバグに関する更新はありますか?

さらに調査したところ、このバグはIvyの代わりに古いViewEngineが使用されている場合にのみ発生します。
アイビーを無効にすることで再現可能

  "angularCompilerOptions": {
    "enableIvy": false
  }

MSEdgeのフィルターフィールドをクリックします。

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