[Filter field] not displaying suggestions in MS Edge

[samuelfahrngruber]

Bug Report

When clicking into the filter field in the non-chromium version of MS Edge, no filter suggestions are shown. Also, when typing, the clear all button does not appear. Instead there is a rather bad-looking "X" that clears the input (see screenshot).

This only happens, when the app is compiled with View Engine instead of Ivy though.

Expected Behavior

When clicking into the filter field, suggestions should be shown in a drop-down component, as in other browsers.

Current Behavior

Clicking into the filter field in MS Edge does not open a drop-down component with the filter suggestions. In place of the drop-down, a small border can be seen (see screenshot).

Steps to Reproduce

1. Disable Angular Ivy in the app's tsconfig:

  "angularCompilerOptions": {
    "enableIvy": false
  }

2. Click into the filter field in any non-chromium version MS Edge.
3. No suggestion values are displayed

Context (Environment)

Used Versions:

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

Attachments

Strange X instead of "clear all"

No dropdown but border visible

Expected behaviour Firefox

Actual behaviour MS Edge

[lukasholzer]

Did an investigation on Edge 16 on a Windows 10 Machine and no FilterField is displaying anything in the autocomplete:

[lukasholzer]

@samuelfahrngruber your behaviour is not reproducible as in Edge Version 18 the autocomplete is displayed correctly.

[samuelfahrngruber]

@lukasholzer Are you using the samples on https://barista.dynatrace.com/? because they work fine for me in Edge 18 too.
However, the problem only occurs with the new version 8.0.0 of barista components, and the examples on https://barista.dynatrace.com/ do not use v8.0.0.

I am currently not able to build a local example with the filter field and barista 8.0.0, as i always get an error message when building a fresh project with only a filter field on the page:

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;
           ~~~~~~~~

Should i file another bug for this issue?

Also, i can not provide a stackblitz example because it does not work at all with MS Edge.

EDIT: i created a bug for this problem #1577

[thomaspink]

Seems to be an issue with dt-highlight on Edge.

The highlight component which is used inside every option for the autocomplete does not render the highlighted text.

It seems to be related to the 'IntersectionObserver` which is used in the highlight component. The observer does not fire on edge after the initial render when the overlay opens and the first options become visible.

All other browser work as intended.
The strange thing is that the IntersectionObserver is supported since Edge 15

[samuelfahrngruber]

The issue occurrs after updating from version 7.5.1 to 8.0.0, previously we didn't have any problems.

[thomaspink]

Currently checking if this is somehow related to issue #1420 (PR #1433) where this code area has been touched last.

[thomaspink]

As it seems to be an IntersectionObserver bug for Edge <=16 I am currently thinking of disabling the highlighting for these browsers. This would make it at least useable.
Pls let me know your thoughts about this "solution".

[moertenschlag]

Sounds reasonable for me - I vote for it.

[samuelfahrngruber]

As it seems to be an IntersectionObserver bug for Edge <=16 I am currently thinking of disabling the highlighting for these browsers. This would make it at least useable.
Pls let me know your thoughts about this "solution".

Maybe also for other non-chromium Edge versions.
For me the problem also occurs with Edge 18.

Exact version:

Microsoft Edge 44.19041.423.0
Microsoft EdgeHTML 18.19041

[moertenschlag]

Good point - same in my tests.

{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: Europe/Vienna}

[lukasholzer]

I'm Questioning why we have used it if we don't have the browser support for it. 🤔 AFAIK we have to support all Edge Versions or?
https://caniuse.com/intersectionobserver

[moertenschlag]

@thomaspink any updates on this bug?

[samuelfahrngruber]

Having investigated further, the bug only occurs when the old View Engine is used instead of Ivy.
Reproducable by disabling Ivy

  "angularCompilerOptions": {
    "enableIvy": false
  }

and clicking into the filter field in MS Edge.