Barista: [过滤器字段] 在 MS Edge 中不显示建议

创建于 2020-09-04  ·  13评论  ·  资料来源: dynatrace-oss/barista

错误报告


在 MS Edge 的非铬版本中单击过滤器字段时,不会显示过滤器建议。 此外,在键入时,不会出现全部清除按钮。 相反,有一个相当糟糕的“X”清除输入(见截图)。

这只发生在应用程序使用 View Engine 而不是 Ivy 编译时。

预期行为


单击过滤器字段时,建议应显示在下拉组件中,就像在其他浏览器中一样。

当前行为


单击 MS Edge 中的过滤器字段不会打开带有过滤器建议的下拉组件。 在下拉菜单的位置,可以看到一个小边框(见截图)。

繁殖步骤


  1. 在应用程序的 tsconfig 中禁用 Angular Ivy:
  "angularCompilerOptions": {
    "enableIvy": false
  }
  1. 单击任何非铬版本 MS Edge 中的过滤器字段。
  2. 不显示建议值

上下文(环境)


二手版本:

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

附件

奇怪的 X 而不是“全部清除”

image (5)

没有下拉菜单但边框可见

image (4)

预期行为 Firefox

image (7)

实际行为 MS Edge

image (6)

bug filter-field has-pr

最有用的评论

由于它似乎是 Edge <=16 的IntersectionObserver错误,我目前正在考虑禁用这些浏览器的突出显示。 这将使它至少可用。
请让我知道您对这个“解决方案”的看法。

所有13条评论

在 Windows 10 机器上对

image
image

@samuelfahrngruber您的行为是不可重现的,因为在Edge 版本 18 中,自动完成显示正确。

@lukasholzer您是否在使用https://barista.dynatrace.com/上的样本
不过这个问题只出现在新版的barista组件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;
           ~~~~~~~~

我应该为此问题提交另一个错误吗?

另外,我无法提供 stackblitz 示例,因为它根本不适用于 MS Edge。

编辑:我为此问题创建了一个错误 #1577

似乎是 Edge 上dt-highlight问题。

在自动完成的每个选项中使用的高亮组件不会呈现突出显示的文本。

它似乎与高亮组件中使用的“IntersectionObserver”有关。 当叠加层打开并且第一个选项变得可见时,观察者不会在初始渲染后在边缘触发。

所有其他浏览器都按预期工作。
奇怪的是,从Edge 15开始支持IntersectionObserver

从版本7.5.1更新到8.0.0后出现问题,之前我们没有任何问题。

目前正在检查这是否与问题 #1420(PR #1433)有关,该代码区域最后被触及。

由于它似乎是 Edge <=16 的IntersectionObserver错误,我目前正在考虑禁用这些浏览器的突出显示。 这将使它至少可用。
请让我知道您对这个“解决方案”的看法。

对我来说听起来很合理 - 我投了赞成票。

由于它似乎是 Edge <=16 的IntersectionObserver错误,我目前正在考虑禁用这些浏览器的突出显示。 这将使它至少可用。
请让我知道您对这个“解决方案”的看法。

也许也适用于其他非铬 Edge 版本。
对我来说,Edge 18 也会出现这个问题。

确切版本:

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屏幕分辨率:1600x1200, zal:tz :欧洲/维也纳}

如果我们没有浏览器支持,我在质疑为什么要使用它。 🤔 AFAIK 我们必须支持所有 Edge 版本还是?
https://caniuse.com/intersectionobserver

@thomasink关于此错误的任何更新?

经过进一步调查,该错误仅在使用旧的视图引擎而不是 Ivy 时发生。
可通过禁用常春藤重现

  "angularCompilerOptions": {
    "enableIvy": false
  }

并单击 MS Edge 中的过滤器字段。

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

schobocop picture schobocop  ·  10评论

schobocop picture schobocop  ·  13评论

tomheller picture tomheller  ·  4评论

christian-fischer picture christian-fischer  ·  4评论

lukasholzer picture lukasholzer  ·  8评论