Barista: [Campo de filtro] no muestra sugerencias en MS Edge

Creado en 4 sept. 2020  ·  13Comentarios  ·  Fuente: dynatrace-oss/barista

Informe de error


Al hacer clic en el campo de filtro en la versión sin cromo de MS Edge, no se muestran sugerencias de filtro. Además, al escribir, el botón borrar todo no aparece. En su lugar, hay una "X" bastante fea que borra la entrada (ver captura de pantalla).

Sin embargo, esto solo sucede cuando la aplicación se compila con View Engine en lugar de Ivy.

Comportamiento esperado


Al hacer clic en el campo de filtro, las sugerencias deben mostrarse en un componente desplegable, como en otros navegadores.

Comportamiento actual


Al hacer clic en el campo de filtro en MS Edge, no se abre un componente desplegable con las sugerencias de filtro. En lugar del menú desplegable, se puede ver un pequeño borde (ver captura de pantalla).

Pasos para reproducir


  1. Desactive Angular Ivy en el tsconfig de la aplicación:
  "angularCompilerOptions": {
    "enableIvy": false
  }
  1. Haga clic en el campo de filtro en cualquier versión de MS Edge sin cromo.
  2. No se muestran valores de sugerencia

Contexto (medio ambiente)


Versiones utilizadas:

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

Archivos adjuntos

Extraña X en lugar de "borrar todo"

image (5)

Sin menú desplegable pero con borde visible

image (4)

Comportamiento esperado Firefox

image (7)

Comportamiento real MS Edge

image (6)

bug filter-field has-pr

Comentario más útil

Como parece ser un error IntersectionObserver para Edge <= 16, actualmente estoy pensando en deshabilitar el resaltado para estos navegadores. Esto lo haría al menos utilizable.
Por favor, déjeme saber lo que piensa acerca de esta "solución".

Todos 13 comentarios

Hice una investigación en Edge 16 en una máquina con Windows 10 y ningún FilterField muestra nada en el autocompletado:

image
image

@samuelfahrngruber, su comportamiento no es reproducible, ya que en la versión 18 de Edge, el autocompletado se muestra correctamente.

@lukasholzer ¿Está usando las muestras en https://barista.dynatrace.com/? porque también me funcionan bien en Edge 18.
Sin embargo, el problema solo ocurre con la nueva versión 8.0.0 de los componentes de barista, y los ejemplos en https://barista.dynatrace.com/ no usan la v8.0.0.

Actualmente no puedo crear un ejemplo local con el campo de filtro y barista 8.0.0, ya que siempre recibo un mensaje de error cuando construyo un proyecto nuevo con solo un campo de filtro en la página:

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

¿Debo presentar otro error por este problema?

Además, no puedo proporcionar un ejemplo de stackblitz porque no funciona en absoluto con MS Edge.

EDITAR: creé un error para este problema # 1577

Parece ser un problema con dt-highlight en Edge.

El componente de resaltado que se utiliza dentro de cada opción para el autocompletado no representa el texto resaltado.

Parece estar relacionado con 'IntersectionObserver' que se utiliza en el componente de resaltado. El observador no dispara en el borde después del renderizado inicial cuando se abre la superposición y las primeras opciones se vuelven visibles.

Todos los demás navegadores funcionan según lo previsto.
Lo extraño es que IntersectionObserver es compatible desde Edge 15

El problema ocurre después de actualizar de la versión 7.5.1 a 8.0.0 , anteriormente no teníamos ningún problema.

Actualmente comprobando si esto está relacionado de alguna manera con el problema # 1420 (PR # 1433) donde esta área de código se ha tocado por última vez.

Como parece ser un error IntersectionObserver para Edge <= 16, actualmente estoy pensando en deshabilitar el resaltado para estos navegadores. Esto lo haría al menos utilizable.
Por favor, déjeme saber lo que piensa acerca de esta "solución".

Suena razonable para mí, voto a favor.

Como parece ser un error IntersectionObserver para Edge <= 16, actualmente estoy pensando en deshabilitar el resaltado para estos navegadores. Esto lo haría al menos utilizable.
Por favor, déjeme saber lo que piensa acerca de esta "solución".

Quizás también para otras versiones de Edge sin cromo.
Para mí, el problema también ocurre con Edge 18.

Versión exacta:

Microsoft Edge 44.19041.423.0
Microsoft EdgeHTML 18.19041

Buen punto, lo mismo en mis pruebas.

{browserName: MicrosoftEdge, browserVersion: 44.18362.449.0, javascriptEnabled: true, pageLoadStrategy: normal, platform: WINDOWS, platformName: WINDOWS, setWindowRect: false, tiempos de espera: {implícito: 0, pageLoad: 300000, script: 30000},, zal: screenResolution : 1600x1200, zal: tz : Europe / Vienna}

Me pregunto por qué lo hemos usado si no tenemos el navegador compatible. 🤔 AFAIK tenemos que admitir todas las versiones de Edge o?
https://caniuse.com/intersectionobserver

@thomaspink ¿ alguna actualización sobre este error?

Habiendo investigado más a fondo, el error solo ocurre cuando se usa el antiguo View Engine en lugar de Ivy.
Reproducible desactivando Ivy

  "angularCompilerOptions": {
    "enableIvy": false
  }

y haciendo clic en el campo de filtro en MS Edge.

¿Fue útil esta página
0 / 5 - 0 calificaciones