Material-ui: La ondulación permanece si se hace varios clics rápido

¿Qué navegador estás usando? No puedo reproducirlo con Chrome 59.

No se puede reproducir en:

• Cromo 59.0.3071.115
• Firefox 54.0.1
• Borde 38.14393.1066.0
• IE 11.1358.14393.0

@oliviertassinari @kgregory Estoy en Windows 10, Firefox 54.0.1.
Estoy usando mi panel táctil en mi computadora portátil para hacerlo a una velocidad más rápida con ambos dedos ... Supongo que eso es lo que es diferente porque con un dedo no puedo hacerlo. No es un error urgente, pero podría suceder.

Tampoco pude reproducir (Windows 10, Firefox 54.0.1) pero en Chrome y con un botón derecho (secundario) del mouse, se comporta así.

@NonameSLdev Tengo alrededor de 9 clics por segundo y no puedo reproducirlo en esa versión de Firefox.

@Dattaya, ¿está haciendo clic repetidamente con el botón derecho del mouse para reproducir esto en Chrome?

No importa @Dattaya , reproduje en Chrome haciendo clic semi-rápido en el botón izquierdo y derecho del mouse simultáneamente unas diez veces.

Me pregunto si deberíamos tener una onda con un clic derecho del mouse. Yo diría que no. Entonces, tal vez la solución correcta sea deshabilitarlos.

@oliviertassinari es un buen pensamiento, pero probablemente habrá alguna otra combinación de interacciones de usuario que

He mirado esto por un tiempo y no estoy exactamente seguro de por qué estas ondas se quedan varadas en el estado de TouchRipple (matriz de ondas).

A 9cps encontré algo interesante: en Firefox las ondas no se van, en Chrome se van muy lentamente. PERO, en cada clic en Firefox en un botón que ya tiene ondas que no dejaron otra onda aparece, luego se va y toma una onda con él. Comportamiento extraño de hecho

El problema podría haber sido solucionado por # 7575. Yo diría 50/50 ya que no he podido reproducir

Simplemente extrajo y reinstaló todas las dependencias, aún puede reproducir haciendo clic en los botones izquierdo y derecho del mouse simultáneamente a un ritmo semi-rápido.

@kgregory Supongo que es un problema a nivel de ButtonBase en ese caso. Gracias por intentarlo.

Este problema me está volviendo loco, no importa lo que intente, no puedo reproducirlo. He agregado la etiqueta good first issue , si alguien más quiere abordarlo, genial, de lo contrario, permanecerá sin resolver.

@oliviertassinari Lo probé alrededor de algunos. Solo puedo reproducirlo con el panel táctil de mi computadora portátil, incluso a 3 cps.

Hola chicos, al principio, buen trabajo.
Un poco difícil mantenerse al día con la versión beta, pero cada día es más impresionante.

@oliviertassinari usamos mui y tenemos algunos errores extraños con respecto a este problema, tal vez esto ayude a solucionarlo: en una Mac, al usar Chrome no se puede reproducir este problema y todo funciona bien. En una máquina Linux, con cromo, los botones ondulantes se oscurecen cada vez más cuando haces clic en algo a 3cps. Hacer clic rápido no reproduce esto. Lo notable es que al girar el clic rápido https://github.com/ftlabs/fastclick , que usamos, solucionará esto, y los botones manejarán los eventos correctamente. Presionar los botones en la página mui-doc tampoco tiene este efecto, como supongo, no hay bibliotecas que tengan efectos secundarios en material-ui. Quizás ayude a reproducir o delimitar este tema.

Estoy trabajando en una aplicación cordova para iOS (con FastClick para evitar un retraso de material-ui @ next (1.0 v23) y obtengo el mismo comportamiento. La eliminación de FastClick parece arreglar la acumulación de ondas táctiles, pero da como resultado una UX deficiente debido al retraso de 300 ms.

@oliviertassinari Me di cuenta de que tienes una aplicación llamada SplitMe que usa material-ui @ next + cordova, ¿conoces alguna forma de evitar este error de ondulación táctil cuando se usa en conjunto con FastClick? ¿O SplitMe también tiene un retraso de 300 ms?

PD antes había estado usando [email protected] con FastClick y no tenía problemas de ondulación táctil

¿O SplitMe también tiene un retraso de 300 ms?

@ssalka ¿Puedes notar el retraso en la documentación? ¿Es un tema específico de Córdoba? No he trabajado mucho en SplitMe durante mucho tiempo. Hasta donde yo sé, el retraso se puede eliminar con el meta de la ventana gráfica. Para ser confirmado.

Creo que es un problema de Cordova (más específicamente, el UIWebView de iOS). De hecho, no pude encontrar SplitMe en la tienda de aplicaciones, y desafortunadamente no tengo forma de verificar si la documentación se carga en mi proyecto, ya que CORS está deshabilitado y los enlaces HTML a otros dominios se abren en Safari (probé un iframe, sin suerte) . Todo lo que puedo decir con certeza es que las ondas táctiles funcionan bien en v0.x y se acumulan en v1.

En general, parece que todos los principales navegadores (¡incluso Safari para iOS!) Han implementado una solución utilizando la metaetiqueta de la ventana gráfica, como dijiste, pero todavía está presente en la UIWebView utilizada internamente por Cordova. Sin embargo, no consideraría a Cordova como un navegador / plataforma importante, así que entenderé si esto no se cuenta como un problema prioritario.

¡Gracias por la rápida respuesta!

@ssalka ¿Has probado https://github.com/apache/cordova-plugin-wkwebview-engine?

Confirmo que es mucho mejor. Estoy usando este complemento en SplitMe .

@NonameSLdev ¿Todavía puedes reproducir el problema? El tema no ha avanzado mucho en un año. Creo que será seguro cerrarlo.

Sí, el mismo comportamiento: la ondulación permanece y en cada desplazamiento una parte se pierde.

No es realmente un problema importante, pero existe.

ACTUALIZACIÓN : Espere. Solo tengo una idea. ¿Qué pasa si se trata de más bajas del mouse (también conocidas como clics) que elevaciones del mouse? Porque usando el trackpad eso puede suceder ya que estoy usando dos dedos para presionar repetidamente.

Acabo de probar esta teoría y parece ser cierta: cuando hago varios clics, como lo hago para crear la onda, obtuve 21 eventos de mouse hacia abajo y solo 11 eventos de mouse hacia arriba. Creo que esta es la razón. #TokUsLongEnough

@stavlocker @oliviertassinari Me he encontrado con este problema por un tiempo. Para mi caso, finalmente pude rastrearlo hasta '-webkit-app-region': 'no-drag' eliminar la propiedad solucionó por completo el problema. Sospecho que esto puede ser similar al problema al que se hace referencia # 11696

Solo para su información, estoy usando openfin en Chrome 61

@gtsafas Quizás esto podría solucionarlo, pero como dije en mi comentario (arriba del tuyo) es porque hay más bajas que altas del mouse. Sin mirar el código, puedo decir que la ondulación se crea al presionar el mouse y se elimina al presionar el mouse hacia arriba, pero ese mouse hacia arriba nunca llegó porque hay más bajas que altas. Su solución es buena, pero solo funcionaría en navegadores webkit.

Dos soluciones como yo lo veo:

• Sugiero que pongamos un temporizador en las ondas. Si no se quita después de 5 segundos, elimínelo automáticamente. En el lado de UX, debe tenerse en cuenta que esto podría confundir a los usuarios que presionan prolongadamente y ven que se libera la onda, quizás haciéndoles pensar que presionaron el botón al soltar el clic (cuando no lo han soltado).
• Simplemente cree la ondulación con el mouse hacia arriba en lugar de hacia abajo. Obviamente, esto se vería diferente y si un usuario mantiene presionado un botón, no vería una ondulación, pero lo soluciona.

@stavlocker sí, no lo estaba proponiendo como solución. Pero estaba diciendo que el otro problema que causa esto es arrastrar imágenes. Para mí no se trataba específicamente de imágenes sino de algo que interactúa con el arrastre. Algo estaba evitando que ocurriera el mouseup. Al menos en mi caso no estaba relacionado con usuarios con diferentes velocidades de clic, sucedió para todos mientras ese css estaba allí.

Podemos poner un temporizador o el mouse hacia arriba, pero estos solo ocultan el problema. Creo que necesitamos saber por qué el mouse hacia arriba no se dispara antes de parchearlo.

¿Le sucede esto en todos los sitios de material-ui?

@gtsafas Eso es interesante. Pero no es un error de MUI que el mouse hacia arriba no se active. En mi caso es porque con mi trackpad puedo usar dos dedos para hacer clic. Mi pensamiento es que debido a que uso dos dedos que pueden activar otro mouse hacia abajo cuando ya hay uno hacia abajo, a veces levanto el otro dedo mientras se presiona el segundo, que el trackpad no detecta como un mouse hacia arriba porque hay algo presionado. Esto causa más bajas que altas, por lo que la onda se mantiene.

@stavlocker ok, entonces eso es diferente. Mientras intentaba depurar esto (antes de darme cuenta de que era -webkit-app-region) agregué el registro alrededor del mouse hacia abajo / arriba y también observé más bajas que altas.

Entonces, si conecta un mouse normal, ¿funciona bien?

@gtsafas puede reproducir el comportamiento con un mouse haciendo clic simultáneamente en los botones izquierdo y derecho.

también tuvimos este problema. probablemente esté evitando otros eventos del mouse ... verifique su código para algo como:

document.addEventListener("mousedown", myScript); // should be document.addEventListener("mousedown", myScript, false);
document.addEventListener("mouseup", myScript); // should be document.addEventListener("mouseup", myScript, false);

//jquery example: 
        // (...)
        documentElement.on({
            'mouseup': (e) => {
                e.preventDefault(); // WRONG! cut this off
                isDrag = false
            },
        // (...)
        });

@ejnu Deberíamos evitar el invariante predeterminado. Algo puede estar mal.

@kgregory @oliviertassinari
No estoy seguro de si esto es correcto, pero esto es lo que encontré después de algunas pruebas:
De alguna manera, esto sucede cuando un clic interactúa con el menú contextual de una manera extraña. Probé esto al no lograr que la ondulación persista con: onContextMenu={e => {e.preventDefault()}} en ButtonBase. No parece que puedas detectar cuándo ocurre un clic en el menú contextual, pero creo que he logrado solucionarlo deteniendo la ondulación en el evento del menú contextual: # 13740

   handleTouchMove = createRippleHandler(this, 'TouchMove', 'stop');

+  handleContextMenu = createRippleHandler(this, 'ContextMenu', 'stop');

   handleBlur = createRippleHandler(this, 'Blur', 'stop', () => {
    clearTimeout(this.focusVisibleTimeout);
    if (this.state.focusVisible) {


        onTouchEnd={this.handleTouchEnd}
        onTouchMove={this.handleTouchMove}
        onTouchStart={this.handleTouchStart}
+       onContextMenu={this.handleContextMenu}
        ref={buttonRef}
        tabIndex={disabled ? '-1' : tabIndex}
        {...buttonProps}

¿Alguien puede confirmar?

@ 0maxxam0 financió este problema con $ 40. Véalo en IssueHunt

Debería resolverse con # 13740. Si puede reproducir el problema con la última versión, ¡háganoslo saber!

@oliviertassinari @kgregory Todavía puedo reproducir, como ya dije en el # 13740. Este RP solo corrige el spam del menú contextual, pero no el spam del trackpad. Este comentario describe el problema que estoy sufriendo y ofrece dos soluciones.

Formas de reproducirse:

1. Ir a las demostraciones de componentes de botón
2. Usa tu trackpad para hacer clic en el botón varias veces

Estoy usando un Lenovo Yoga 700 con Windows 10, se puede reproducir en Chrome 71, Firefox 64 (Quantum), Edge 42.

Estoy seguro de que esto se puede reproducir en diferentes computadoras, ya que el problema es que el trackpad registra varios dedos y, a veces, no registra tantas subidas como bajadas, como concluí en mis pruebas anteriores .

Veo un sombreado de ondulación de botones acumulativo en el espacio de mi teléfono, la aplicación reaccionar mui en un iPad. en Android y Web no hay problema. Cada vez que hago clic en el botón, se vuelve más oscuro (o más claro) hasta que se satura.

También puedo confirmar este problema en Safari / iOS: ni siquiera se necesita tocar rápidamente, la superposición de oscuridad / luz simplemente nunca desaparece después de tocarla.

@oliviertassinari @kgregory Todavía puedo reproducir, como ya dije en el # 13740. Este RP solo corrige el spam del menú contextual, pero no el spam del trackpad. Este comentario describe el problema que estoy sufriendo y ofrece dos soluciones.

Formas de reproducirse:

1. Go to the [button component demos](https://material-ui.com/demos/buttons/)

2. Use your trackpad to click the button a bunch of times

Estoy usando un Lenovo Yoga 700 con Windows 10, se puede reproducir en Chrome 71, Firefox 64 (Quantum), Edge 42.

Estoy seguro de que esto se puede reproducir en diferentes computadoras, ya que el problema es que el trackpad registra varios dedos y, a veces, no registra tantas subidas como bajadas, como concluí en mis pruebas anteriores .

Si el problema es que hay más eventos de mousedown activados que mouseup, deberíamos ver si hay un número correspondiente de mouseup fuera de ese elemento. Un truco para este tipo de cosas es que puede agregar un controlador de mouse hacia arriba (que se eliminaría a sí mismo) al elemento DOM raíz al presionar el mouse hacia abajo, luego el mouse hacia arriba siempre se disparará, sin importar dónde se capturó el mousedown. Sospecho que siempre hay algún evento que se activa para desencadenar la limpieza, pero es posible que no esté en el elemento de origen.

@CaptainN ¿

iOS 11.3.1: principalmente lo veo en componentes IconButton, pero también en Fab.

Parece que se supone que debe:

1. Anime el círculo desde el punto táctil.
2. Desaparecer (alfa) durante la animación.
3. Supongo que se eliminarán y limpiarán después de que se complete la animación.

Para mí, los pasos 2 y 3 no se realizan en mi iPad (11.3.1), un iPhone más antiguo (11.4.1) o iPhone 8 (12.1.2).

Veré si puedo profundizar en el código en algún momento, pero no puedo hacer ninguna promesa sobre el tiempo.

@CaptainN ¿Está esto en las demostraciones de documentos o en su propio código? No puedo reproducirlo con los documentos en un iPhone 10 con iOS 12.1 o un iPad más antiguo con 12.1.3, así que me pregunto si hay factores de confusión en juego.

No digo que no sea un error, pero es posible que se requieran más pasos para reproducirlo.

Está en mi propia aplicación, que es una aplicación de tamaño mediano construida con Meteor, React y Material-UI. De hecho, pronto será público, así que puedo compartir un enlace.

Ambos buscaré la causa en el código en algún momento, y si no puedo encontrarlo, intentaré producir una reducción.

También estoy usando SSR; recibo algunas advertencias sobre atributos de estilo que no coinciden, generalmente el servidor o el cliente no están de acuerdo con el prefijo -webkit-, ¿podría tener algo que ver con eso? De hecho, no estoy muy seguro de cómo material-ui aplica los prefijos (autoprefixer). ¿Hay documentos al respecto?

Esto podría ayudar:
https://material-ui.com/getting-started/supported-platforms/#css -prefixing

También estoy experimentando este problema en mi propio entorno usando Meteor, React y Material-UI y solo en iOS. He podido usar el emulador de dispositivos de Chrome y solo lograr que este error se active al emular dispositivos iOS y no dispositivos Android.
Parece que todavía no puedo replicar esto con los entornos de prueba de demostración, pero podría provenir del componente ButtonBase porque veo el problema con los botones y las pestañas.

Ahora veo esto incluso en Chrome en Windows con el modo móvil habilitado en Dev Tools. En esta aplicación: https://www.pixstoriplus.com/

@CaptainN Lo echaré un vistazo más tarde. Solo por motivos de claridad, puede publicar sus pasos de reproducción. ¿Qué Chrome estás usando?

Lo hacía de manera bastante consistente antes, pero ahora que estoy tratando de reproducirlo en Chrome, nada. Algo debe haberlo puesto en un estado de error de algún tipo.

En iOS, puede cargar esa aplicación y ver el problema con bastante facilidad. Toque hacia adelante y hacia atrás entre los botones de inicio y de búsqueda en la parte inferior de navegación para ver el ejemplo más sencillo. O toque buscar, luego vuelva a inicio y presione inicio varias veces.

Puedo recrearlo en iOS en la navegación inferior.

Pude obtener un comportamiento más consistente si recargas la página después de cambiar del modo normal de Chrome al modo de dispositivo.

@ zuus-keith Si está relacionado con el simulador móvil de la herramienta de desarrollo de Chrome, no es algo que debamos arreglar en particular. ¿A menos que sea la misma causa raíz?

@oliviertassinari Creo que es la misma causa raíz. Inicialmente lo encontré en un dispositivo iOS real, sucede que el simulador móvil de la herramienta de desarrollo de Chrome configurado en las vistas de 'iPhone' o 'iPad' produce el mismo comportamiento.

Para agregar, hasta ahora el problema solo se ha informado en 3 instancias diferentes, pero todas usan la misma pila de tecnología (es decir, Meteor, React y MUI).

Esto resultó ser debido a otro paquete de Meteor muy común llamado "fastclick" - que no ha sido realmente necesario (si usa la configuración correcta de la ventana gráfica) en Safari durante años. Si alguien se encuentra con este problema, la solución es simplemente eliminar "fastclick".

¿Hay alguien que se vea afectado por esto y no en un entorno simulado? ¿O está bien cerrar esto?

Esto se solucionó para mí en entornos no simulados (en iPad) eliminando el paquete fastclick de mi aplicación de meteoritos.

Cerrando por ahora, si alguien puede reproducir, háganoslo saber.