Material-ui: L'ondulation reste si multiclicked rapidement

Quel navigateur utilisez-vous? Je ne peux pas le reproduire avec Chrome 59.

Impossible de se reproduire dans:

• Chrome 59.0.3071.115
• Firefox 54.0.1
• Edge 38.14393.1066.0
• IE 11.1358.14393.0

@oliviertassinari @kgregory Je suis sous Windows 10, Firefox 54.0.1.
J'utilise mon pavé tactile sur mon ordinateur portable pour le faire plus rapidement avec les deux doigts ... Je suppose que c'est ce qui est différent car avec un seul doigt je ne parviens pas à le faire. Ce n'est pas un bug urgent mais cela pourrait arriver.

Je n'ai pas pu reproduire non plus (Windows 10, Firefox 54.0.1) mais dans Chrome et avec un bouton droit (secondaire) de la souris, il se comporte comme ça.

@NonameSLdev Je suis à environ 9 clics par seconde et je ne peux pas le reproduire dans cette version de Firefox.

@Dattaya cliquez -vous à plusieurs reprises avec le bouton droit de la souris pour reproduire cela dans Chrome?

Nevermind @Dattaya , j'ai reproduit dans Chrome en cliquant semi-rapidement sur les boutons gauche et droit de la souris simultanément une dizaine de fois.

Je me demande si nous devrions avoir une ondulation avec un clic droit de la souris? Je dirais non. Alors peut-être que la bonne solution est de les désactiver.

@oliviertassinari a bien pensé, mais il y aura probablement une autre combinaison d'interactions utilisateur dignes d'ondulation qui mèneront à ce comportement. Avez-vous vu quelque chose dans les normes concernant les ondulations d'encre sur les clics droits (je suppose qu'il n'y a rien là-bas)? Dans Chrome, il n'y a pas d'ondulations sur la barre de favoris lorsqu'un clic droit est effectué sur un favori. Peut-être que c'est une preuve suffisante 😄

J'ai regardé cela pendant un petit moment et je ne sais pas exactement pourquoi ces ondulations sont bloquées dans l'état de TouchRipple (tableau d'ondulation).

À 9cps, j'ai trouvé quelque chose d'intéressant: sur Firefox, les ondulations ne partent pas, sur Chrome, elles partent extrêmement lentement. MAIS, à chaque clic sur Firefox, un bouton qui a déjà des ondulations qui n'ont pas laissé une autre ondulation apparaît puis part et prend une ondulation avec lui. Comportement étrange en effet

Le problème a peut-être été résolu par # 7575. Je dirais 50/50 car je n'ai pas pu reproduire

Juste tiré et réinstallé toutes les dépendances, toujours capable de se reproduire en cliquant simultanément sur les boutons gauche et droit de la souris à un rythme semi-rapide.

@kgregory Je suppose que c'est un problème au niveau de ButtonBase dans ce cas. Merci de l'avoir essayé.

Ce problème me rend fou, peu importe ce que j'essaye, je ne peux pas me reproduire. J'ai ajouté la balise good first issue , si quelqu'un d'autre veut y répondre, tant mieux, sinon, cela restera non résolu.

@oliviertassinari Je l'ai testé autour de quelques-uns. Je ne peux le reproduire qu'avec le pavé tactile de mon ordinateur portable, même à 3 cps.

Salut les gars, au début, beau travail.
Un peu difficile à suivre avec la version bêta, mais cela devient de plus en plus génial au quotidien.

@oliviertassinari nous utilisons mui et avons quelques erreurs étranges concernant ce problème, peut-être que cela aide à résoudre ce problème: sur un Mac, en utilisant Chrome, vous ne pouvez pas reproduire ce problème et tout fonctionne très bien. Sur une machine Linux, avec du chrome, les boutons d'ondulation deviennent de plus en plus sombres lorsque vous cliquez dessus à quelque chose à 3 cps. Cliquer dessus rapidement ne reproduit pas cela. Il est remarquable que la rotation de fastclick https://github.com/ftlabs/fastclick , que nous utilisons, corrige cela, et les boutons gèrent correctement les événements. Appuyer sur les boutons de la page mui-doc n'a pas non plus cet effet, comme je suppose, il n'y a pas de bibliothèques ayant des effets secondaires sur material-ui. Peut-être que cela aide à reproduire ou à délimiter ce problème.

Je travaille sur une application iOS cordova (avec material-ui @ next (1.0 v23) et j'obtiens le même comportement. La suppression de FastClick semble corriger l'accumulation d'ondulations tactiles, mais entraîne une mauvaise UX en raison du retard de 300 ms.

@oliviertassinari J'ai remarqué que vous avez une application appelée SplitMe qui utilise material-ui @ next + cordova, connaissez-vous un moyen d'éviter ce bug d'ondulation tactile lorsqu'il est utilisé en tandem avec FastClick? Ou SplitMe a-t-il également le délai de 300 ms?

PS avant d'utiliser [email protected] avec FastClick et je n'avais aucun problème d'ondulation tactile

Ou SplitMe a-t-il également le délai de 300 ms?

@ssalka Pouvez-vous remarquer le retard dans la documentation? Est-ce un problème spécifique à Cordova? Je n'ai pas beaucoup travaillé sur SplitMe depuis longtemps. Autant que je sache, le retard peut être supprimé avec la méta de la fenêtre d'affichage. Être confirmé.

Je pense que c'est un problème Cordova (plus précisément, iOS UIWebView). En fait, je n'ai pas pu trouver SplitMe dans l'App Store, et malheureusement je n'ai aucun moyen de vérifier si la documentation se charge dans mon projet, car CORS est désactivé et les liens HTML vers d'autres domaines s'ouvrent dans Safari (j'ai essayé une iframe, pas de chance) . Tout ce que je peux dire avec certitude, c'est que les ondulations tactiles fonctionnent bien sur la v0.x et se développent dans la v1.

En général, il semble que tous les principaux navigateurs (même Safari pour iOS!) Ont implémenté un correctif en utilisant la balise meta viewport, comme vous l'avez dit, mais il est toujours présent dans l'UIWebView utilisé en interne par Cordova. Cependant, je ne compterais pas Cordova comme un navigateur / plate-forme majeur, je comprendrai donc si cela n'est pas considéré comme un problème prioritaire.

Merci pour la réponse rapide!

@ssalka Avez-vous essayé https://github.com/apache/cordova-plugin-wkwebview-engine?

Je confirme que c'est beaucoup mieux. J'utilise ce plugin sur SplitMe .

@NonameSLdev Pouvez-vous toujours reproduire le problème? La question n'a pas beaucoup progressé en un an. Je pense qu'il sera prudent de le fermer.

Oui, même comportement - l'ondulation reste et à chaque survol une partie se perd d'elle-même.

Ce n'est pas vraiment un problème majeur, mais il existe.

MISE À JOUR : Attendez. J'ai juste une idée. Et s'il s'agissait de plus de bas de souris (aka clics) que de souris? Parce que l'utilisation du pavé tactile peut se produire car j'utilise deux doigts pour appuyer à plusieurs reprises.

Je viens de tester cette théorie et cela semble être vrai: en multiclick comme je le fais pour créer l'ondulation, j'ai 21 événements souris enfoncées et seulement 11 événements souris levée. Je pense que c'est la raison. #TookUsLongEnough

@stavlocker @oliviertassinari Je rencontre ce problème depuis un certain temps maintenant. Pour mon cas, j'ai finalement pu le retrouver jusqu'à '-webkit-app-region': 'no-drag' supprimant la propriété, le problème a été résolu pour moi. Je soupçonne que cela peut être similaire au problème référencé # 11696

Juste pour info, j'utilise openfin sur chrome 61

@gtsafas Cela pourrait peut-être résoudre le problème, mais comme je l'ai dit dans mon commentaire (au-dessus du vôtre), c'est parce qu'il y a plus de bas de souris que de haut. Sans regarder le code, je peux dire que l'ondulation est créée lorsque la souris est enfoncée et supprimée lorsque la souris est relevée - mais cette souris n'est jamais arrivée car il y a plus de bas que de haut. Votre solution est bonne, mais elle ne fonctionnerait que dans les navigateurs Webkit.

Deux solutions telles que je les vois:

• Je suggère de mettre une minuterie sur les ondulations? S'il n'est pas supprimé après 5 secondes, supprimez-le automatiquement. Du côté de l'UX, il faut considérer que cela pourrait potentiellement dérouter les utilisateurs qui appuient longuement et voient l'ondulation se libérer, leur faisant peut-être penser qu'ils ont appuyé sur le bouton en relâchant leur clic (quand ils ne l'ont pas relâché)?
• Créez simplement l'ondulation sur la souris vers le haut plutôt que vers le bas de la souris. Cela aurait évidemment un aspect différent et si un utilisateur maintenait un bouton, il ne verrait pas d'ondulation, mais cela résout le problème.

@stavlocker ouais je ne le proposais pas comme solution. Mais je disais que l'autre problème qui cause cela est de faire glisser des images. Pour moi, ce n'était pas spécifiquement des images mais quelque chose qui interagit avec le glissement. Quelque chose empêchait la souris de se produire. Au moins dans mon cas, ce n'était pas lié aux utilisateurs avec des vitesses de clic différentes, cela s'est produit pour tout le monde pendant que le css était là.

Nous pouvons mettre une minuterie ou une souris en place, mais cela ne fait que cacher le problème. Je pense que nous devons savoir pourquoi la souris ne se déclenche pas avant de le corriger.

Cela vous arrive-t-il sur tous les sites de material-ui?

@gtsafas C'est intéressant. Mais ce n'est pas un bogue MUI que la souris ne tire pas. Dans mon cas, c'est parce qu'avec mon trackpad, je peux utiliser deux doigts pour cliquer. Je pense que parce que j'utilise deux doigts qui peuvent déclencher une autre souris alors qu'il y en a déjà une, je lève parfois mon autre doigt pendant que le second est enfoncé, ce que le trackpad ne détecte pas comme une souris vers le haut parce qu'il y a quelque chose enfoncé. Cela provoque plus de baisses que de hausses, donc l'ondulation reste.

@stavlocker ok alors c'est différent. En essayant de déboguer ceci (avant de réaliser que c'était -webkit-app-region), j'ai ajouté la journalisation autour de la souris vers le bas / haut et j'ai également observé plus de bas que de haut.

Donc, si vous branchez une souris normale, cela fonctionne bien?

@gtsafas vous pouvez reproduire le comportement avec une souris en cliquant simultanément sur les boutons gauche et droit.

nous avons eu ce problème aussi. vous avez probablement empêché d'autres événements de souris ... vérifiez votre code pour quelque chose comme:

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 Nous devrions éviter l'invariant par défaut. Quelque chose ne va pas.

@kgregory @oliviertassinari
Je ne sais pas si c'est vrai mais voici ce que j'ai trouvé après un petit test:
D'une manière ou d'une autre, cela se produit lorsqu'un clic interagit avec le menu contextuel d'une manière étrange. J'ai testé cela en échouant à faire persister l'ondulation avec: onContextMenu={e => {e.preventDefault()}} sur ButtonBase. Il ne semble pas que vous puissiez détecter lorsqu'un clic se produit dans le menu contextuel, mais je pense que j'ai réussi à résoudre ce problème en arrêtant l'ondulation sur l'événement du menu contextuel: # 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}

Quelqu'un peut-il confirmer?

@ 0maxxam0 a financé ce numéro avec 40 $. Voir sur IssueHunt

Il devrait être résolu avec # 13740. Si vous pouvez reproduire le problème avec la dernière version, faites-le nous savoir!

@oliviertassinari @kgregory Je peux toujours reproduire, comme je l'ai déjà dit sur # 13740. Ce PR corrige uniquement le spam du menu contextuel, mais pas le spam du trackpad. Ce commentaire décrit le problème dont je souffre et propose deux solutions.

Façons de reproduire:

1. Accéder aux démos des composants du
2. Utilisez votre trackpad pour cliquer sur le bouton plusieurs fois

J'utilise un Lenovo Yoga 700 sous Windows 10, je peux reproduire dans Chrome 71, Firefox 64 (Quantum), Edge 42.

Je suis certain que cela peut être reproduit sur différents ordinateurs, car le problème est que le trackpad enregistre plusieurs doigts et n'enregistre parfois pas autant de souris que de souris, comme je l'ai conclu lors de mes tests précédents .

Je vois un ombrage cumulatif des boutons dans mon phonegap, réagissez à l'application mui sur un iPad. sur Android et Web, il n'y a pas de problème. Chaque fois que je clique sur le bouton, il devient plus sombre (ou plus clair) jusqu'à ce qu'il sature.

Je peux également confirmer ce problème sur Safari / iOS - il ne faut même pas taper rapidement, la superposition sombre / clair ne disparaît tout simplement jamais après l'avoir tapée.

@oliviertassinari @kgregory Je peux toujours reproduire, comme je l'ai déjà dit sur # 13740. Ce PR corrige uniquement le spam du menu contextuel, mais pas le spam du trackpad. Ce commentaire décrit le problème dont je souffre et propose deux solutions.

Façons de reproduire:

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

J'utilise un Lenovo Yoga 700 sous Windows 10, je peux reproduire dans Chrome 71, Firefox 64 (Quantum), Edge 42.

Je suis certain que cela peut être reproduit sur différents ordinateurs, car le problème est que le trackpad enregistre plusieurs doigts et n'enregistre parfois pas autant de souris que de souris, comme je l'ai conclu lors de mes tests précédents .

Si le problème est qu'il y a plus d'événements mousedown déclenchés que mouseup, nous devrions voir s'il existe un nombre correspondant de mouseup en dehors de cet élément. Une astuce pour ce genre de choses, vous pouvez ajouter un gestionnaire de souris (qui se supprimerait) à l'élément DOM racine lorsque la souris est enfoncée, puis la souris en haut se déclenchera toujours, peu importe où mousedown a été capturé. Je soupçonne qu'il y a toujours un événement qui se déclenche pour déclencher le nettoyage, mais il se peut que ce ne soit pas sur l'élément d'origine.

@CaptainN Sur quel iOS / Safari reproduisez-vous cela. Je ne peux pas recréer sur iOS 12.1.2

iOS 11.3.1 - principalement je le vois sur les composants IconButton, mais aussi sur Fab.

On dirait que c'est censé:

1. Animez le cercle à partir du point tactile.
2. Fondu (alpha) pendant l'animation.
3. Je suppose que je suis supprimé et nettoyé une fois l'animation terminée.

Les étapes 2 et 3 pour moi ne se produisent pas sur mon iPad (11.3.1) un ancien iPhone (11.4.1) ou iPhone 8 (12.1.2).

Je vais voir si je peux creuser dans le code à un moment donné, mais je ne peux pas faire de promesses sur le timing.

@CaptainN Est-ce dans les démos de la documentation ou dans votre propre code? Je ne peux pas le reproduire avec les documents sur un iPhone 10 avec iOS 12.1 ou un iPad plus ancien avec 12.1.3, alors je me demande s'il y a des facteurs de confusion en jeu?

Ne pas dire que ce n'est pas un bogue, mais il peut y avoir plus d'étapes nécessaires pour le reproduire.

C'est dans ma propre application, qui est une application de taille moyenne construite avec Meteor, React et Material-UI. Ce sera bientôt public, donc je peux partager un lien.

Je chercherai tous les deux la cause dans le code à un moment donné, et si je ne peux pas la trouver, j'essaierai de produire une réduction.

J'utilise également SSR - je reçois des avertissements sur les attributs de style incompatibles, généralement le serveur ou le client n'est pas d'accord sur le préfixe -webkit- - cela pourrait-il avoir quelque chose à voir avec cela? En fait, je ne sais pas vraiment comment material-ui applique les préfixes (autoprefixer) - y a-t-il des documents à ce sujet?

Cela pourrait aider:
https://material-ui.com/getting-started/supported-platforms/#css -prefixing

Je rencontre également ce problème dans mon propre environnement en utilisant Meteor, React et Material-UI et uniquement sur iOS. J'ai pu utiliser l'émulateur d'appareil de Chrome et uniquement déclencher ce bogue lors de l'émulation d'appareils iOS et non d'appareils Android.
Je n'arrive pas encore à reproduire cela avec les sandbox de démonstration, mais cela peut provenir du composant ButtonBase car je vois le problème avec les boutons et les onglets.

Je vois maintenant cela même dans Chrome sur Windows avec le mode mobile activé dans les outils de développement. Sur cette application: https://www.pixstoriplus.com/

@CaptainN J'y jetterai un œil plus tard. Pour plus de clarté, pouvez-vous publier vos étapes de reproduction. Quel Chrome utilisez-vous?

Il le faisait de manière assez cohérente auparavant, mais maintenant que j'essaie de le reproduire dans Chrome, rien. Quelque chose a dû le mettre dans un état d'erreur quelconque.

Sur iOS, vous pouvez simplement charger cette application et voir le problème assez facilement. Appuyez dans les deux sens entre les boutons d'accueil et de recherche dans le menu de navigation inférieur pour l'exemple le plus simple. Ou appuyez sur rechercher, puis de retour à l'accueil, et appuyez plusieurs fois sur accueil.

Je peux le recréer sur iOS sur la navigation du bas.

J'ai pu obtenir un comportement plus cohérent si vous rechargez la page après être passé du mode Chrome normal au mode appareil.

@ zuus-keith Si c'est lié au simulateur mobile de l'outil de développement chrome, ce n'est pas quelque chose que nous devrions particulièrement corriger. À moins que ce ne soit la même cause fondamentale?

@oliviertassinari Je pense que c'est la même cause profonde. Je l'ai d'abord rencontré sur un appareil iOS réel, il se trouve que le simulateur mobile de l'outil de développement Chrome réglé sur les vues `` iPhone '' ou `` iPad '' produit le même comportement.

Pour ajouter, jusqu'à présent, le problème n'a été signalé que sur 3 instances différentes mais utilisant toutes la même pile technologique (c'est-à-dire Meteor, React et MUI).

Cela s'est avéré être dû à un autre package Meteor très courant appelé "fastclick" - qui n'a pas vraiment été nécessaire (si vous utilisez les bons paramètres de fenêtre) dans Safari depuis des années. Si quelqu'un rencontre ce problème, la solution consiste simplement à supprimer "fastclick".

Y a-t-il quelqu'un qui est affecté par cela et non dans un environnement simulé? Ou est-ce que je peux fermer ça?

Cela a été corrigé pour moi dans des environnements non simulés (sur iPad) en supprimant le package fastclick de mon application meteor.

Clôture pour l'instant, si quelqu'un peut reproduire, faites-le nous savoir.