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.
When clicking into the filter field, suggestions should be shown in a drop-down component, as in other browsers.
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).
"angularCompilerOptions": {
"enableIvy": false
}
Did an investigation on Edge 16 on a Windows 10 Machine and no FilterField is displaying anything in the autocomplete:
@samuelfahrngruber your behaviour is not reproducible as in Edge Version 18 the autocomplete is displayed correctly.
@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
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
The issue occurrs after updating from version 7.5.1 to 8.0.0, previously we didn't have any problems.
Currently checking if this is somehow related to issue #1420 (PR #1433) where this code area has been touched last.
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".
Sounds reasonable for me - I vote for it.
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
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}
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
@thomaspink any updates on this bug?
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.
Most helpful comment
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".