Material-ui: Ripple tetap ada jika diklik dengan cepat

Browser apa yang Anda gunakan? Saya tidak dapat mereproduksinya dengan Chrome 59.

Tidak dapat mereproduksi dalam:

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

@oliviertassinari @kgregory Saya menggunakan Windows 10, Firefox 54.0.1.
Saya menggunakan touchpad di laptop saya untuk melakukannya dalam kecepatan yang lebih cepat dengan kedua jari ... Saya rasa itulah yang berbeda karena dengan satu jari saya tidak dapat melakukannya. Ini bukan bug yang mendesak tapi bisa terjadi.

Saya juga tidak dapat mereproduksi (Windows 10, Firefox 54.0.1) tetapi di Chrome dan dengan tombol kanan mouse (sekunder) berfungsi seperti itu.

@NonameSLdev Saya memiliki sekitar 9 klik per detik dan tidak dapat mereproduksinya di versi Firefox itu.

@Dattaya Apakah Anda berulang kali mengklik dengan tombol kanan mouse untuk mereproduksi ini di Chrome?

Nevermind @Dattaya , saya mereproduksi di Chrome dengan mengklik semi-cepat tombol kiri dan kanan mouse secara bersamaan sekitar sepuluh kali.

Saya bertanya-tanya haruskah kita mendapatkan riak dengan klik kanan mouse? Saya akan mengatakan tidak. Jadi mungkin perbaikan yang tepat adalah menonaktifkannya.

@oliviertassinari pemikiran yang bagus, tetapi mungkin akan ada beberapa kombinasi lain dari interaksi pengguna yang layak riak yang mengarah ke perilaku ini. Pernahkah Anda melihat sesuatu dalam standar tentang riak tinta pada klik kanan (saya rasa tidak ada apa-apa di sana)? Di Chrome, tidak ada riak di bilah bookmark saat bookmark diklik kanan. Mungkin ini bukti yang cukup 😄

Saya telah melihat ini sebentar dan saya tidak begitu yakin mengapa riak ini terdampar dalam status TouchRipple (array riak).

Pada 9cps saya menemukan sesuatu yang menarik: Di firefox riak tidak hilang, pada krom mereka pergi dengan sangat lambat. TETAPI, pada setiap klik pada firefox pada tombol yang sudah memiliki riak yang tidak meninggalkan riak lain muncul kemudian pergi dan mengambil riak dengannya. Tingkah laku memang aneh

Masalahnya mungkin telah diperbaiki oleh # 7575. Saya akan mengatakan 50/50 karena saya belum dapat mereproduksi

Hanya menarik dan menginstal ulang semua dependensi, masih dapat mereproduksi dengan mengklik tombol mouse kiri dan kanan secara bersamaan dengan kecepatan semi-cepat.

@kgregory Saya rasa ini adalah masalah di level ButtonBase dalam kasus itu. Terima kasih telah mencobanya.

Masalah ini membuat saya gila, apa pun yang saya coba, saya tidak dapat mereproduksi. Saya telah menambahkan tag good first issue , jika orang lain ingin mengatasinya, bagus, jika tidak, itu akan tetap tidak terselesaikan.

@oliviertassinari Saya mengujinya di beberapa. Saya hanya dapat mereproduksinya dengan touchpad laptop saya, bahkan pada 3cps.

Hai teman-teman, pada awalnya, kerja bagus.
Agak sulit untuk mengikuti beta, tetapi semakin hebat setiap hari.

@oliviertassinari kami menggunakan mui dan memiliki beberapa kesalahan aneh tentang masalah ini, mungkin ini membantu untuk memperbaiki ini: Di ​​Mac, menggunakan chrome Anda tidak dapat mereproduksi masalah ini dan semuanya bekerja dengan baik. Pada mesin Linux, dengan chrome, tombol beriak menjadi semakin gelap saat Anda mengkliknya pada sesuatu di 3cps. Mengkliknya dengan cepat tidak mereproduksi ini. Hebatnya, pergantian fastclick https://github.com/ftlabs/fastclick , yang kami gunakan, akan memperbaiki ini, dan tombol akan menangani kejadian dengan benar. Menekan tombol pada halaman mui-doc juga tidak memiliki efek ini, seperti yang saya asumsikan, tidak ada perpustakaan yang memiliki efek samping pada material-ui. Mungkin membantu untuk mereproduksi atau membatasi masalah ini.

Saya sedang mengerjakan aplikasi Cordova iOS (dengan FastClick untuk menghindari penundaan 300ms) menggunakan material-ui @ next (1.0 v23) dan saya mendapatkan perilaku yang sama. Menghapus FastClick tampaknya memperbaiki riak sentuhan yang menumpuk, tetapi menghasilkan UX yang buruk karena penundaan 300ms.

@oliviertassinari Saya melihat Anda memiliki aplikasi bernama SplitMe yang menggunakan material-ui @ next + cordova, tahukah Anda cara menghindari bug touch ripple saat digunakan bersama-sama dengan FastClick? Atau apakah SplitMe juga memiliki penundaan 300ms?

PS sebelumnya saya telah menggunakan [email protected] dengan FastClick dan tidak memiliki masalah riak sentuh

Atau apakah SplitMe juga memiliki penundaan 300ms?

@ssalka Dapatkah Anda melihat keterlambatan dalam dokumentasi? Apakah ini masalah khusus Cordova? Saya sudah lama tidak melakukan banyak pekerjaan di SplitMe. Sejauh yang saya tahu, penundaan dapat dihapus dengan meta viewport. Untuk di konfirmasi.

Saya pikir ini adalah masalah Cordova (lebih khusus lagi, iOS UIWebView). Saya sebenarnya tidak dapat menemukan SplitMe di app store, dan sayangnya saya tidak memiliki cara untuk memeriksa apakah dokumentasi dimuat dalam proyek saya, karena CORS dinonaktifkan dan tautan HTML ke domain lain terbuka di Safari (mencoba iframe, tidak berhasil) . Yang bisa saya katakan dengan pasti adalah bahwa riak sentuhan bekerja dengan baik di v0.x, dan menumpuk di v1.

Secara umum, sepertinya semua browser utama (bahkan Safari untuk iOS!) Telah menerapkan perbaikan menggunakan tag meta viewport, seperti yang Anda katakan, tetapi masih ada di UIWebView yang digunakan secara internal oleh Cordova. Saya tidak akan menganggap Cordova sebagai browser / platform utama, jadi saya akan mengerti jika ini tidak dihitung sebagai masalah prioritas.

Terima kasih atas tanggapan yang cepat!

@ssalka Sudahkah Anda mencoba https://github.com/apache/cordova-plugin-wkwebview-engine?

Saya menegaskan itu jauh lebih baik. Saya menggunakan plugin ini di SplitMe .

@NonameSLdev Apakah Anda masih dapat mereproduksi masalah ini? Masalahnya tidak mengalami banyak kemajuan dalam setahun. Saya pikir akan aman untuk menutupnya.

Ya, perilaku yang sama - riak tetap ada dan di setiap gerakan beberapa di antaranya hilang dengan sendirinya.

Ini sebenarnya bukan masalah besar, tapi memang ada.

UPDATE : Tunggu. Baru mendapat ide. Bagaimana jika ini tentang lebih banyak mouse down (alias klik) daripada mouse up? Karena menggunakan track pad itu bisa terjadi karena saya menggunakan dua jari untuk menekan berulang kali.

Saya baru saja menguji teori ini dan tampaknya benar: Saat menjilati banyak gerakan seperti yang saya lakukan untuk membuat riak, saya mendapat 21 peristiwa mouse down dan hanya 11 peristiwa mouse up. Saya pikir inilah alasannya. #TookUsLongEnough

@stavlocker @oliviertassinari Saya telah mengalami masalah ini selama beberapa waktu sekarang. Untuk kasus saya, saya akhirnya dapat melacaknya hingga '-webkit-app-region': 'no-drag' menghapus properti sepenuhnya memperbaiki masalah untuk saya. Saya menduga ini mungkin mirip dengan masalah yang dirujuk # 11696

FYI saja saya menggunakan openfin di chrome 61

@gtsafas Mungkin ini bisa memperbaikinya, tapi seperti yang saya katakan di komentar saya (di atas Anda) itu karena ada lebih banyak mouse down daripada up. Tanpa melihat kodenya, saya dapat mengatakan bahwa riak dibuat pada mouse ke bawah dan dihapus pada mouse ke atas - tetapi mouse ke atas tidak pernah tiba karena ada lebih banyak turun daripada naik. Perbaikan Anda bagus tetapi hanya berfungsi di browser webkit.

Dua solusi yang saya lihat:

• Saya sarankan kita memasang timer pada riak? Jika tidak dihapus setelah 5 detik, hapus otomatis. Di sisi UX, perlu dipertimbangkan bahwa ini berpotensi membingungkan pengguna yang lama menekan dan melihat riak dilepaskan, mungkin membuat mereka berpikir bahwa mereka menekan tombol dengan melepaskan klik mereka (ketika mereka belum melepaskannya)?
• Buat saja riak pada mouse ke atas, bukan ke bawah. Ini jelas akan terlihat berbeda dan jika pengguna menahan tombol mereka tidak akan melihat riak tetapi itu memperbaikinya.

@stavlocker ya saya tidak mengusulkannya sebagai perbaikan. Tapi saya katakan bahwa masalah lain yang menyebabkan ini adalah menyeret gambar. Bagi saya itu bukan gambar khusus tetapi sesuatu yang berinteraksi dengan menyeret. Sesuatu telah mencegah mouseup terjadi. Setidaknya dalam kasus saya itu tidak terkait dengan pengguna dengan kecepatan klik yang berbeda, itu terjadi untuk semua orang saat css itu ada di sana.

Kita bisa memasang timer atau mouse tapi ini hanya menyembunyikan masalahnya. Saya pikir kita perlu tahu mengapa mouse tidak menyala sebelum menambalnya.

Apakah ini terjadi pada Anda di setiap situs material-ui?

@gtsafas Itu menarik. Tapi itu bukan bug MUI yang tidak diaktifkan oleh mouse. Dalam kasus saya itu karena dengan trackpad saya, saya dapat menggunakan dua jari untuk mengklik. Pikiran saya adalah karena saya menggunakan dua jari yang dapat memicu mouse lain ke bawah ketika sudah ada yang turun, terkadang saya mengangkat jari yang lain sementara yang kedua ditekan yang tidak terdeteksi oleh trackpad sebagai mouse karena ada sesuatu yang ditekan ke bawah. Hal ini menyebabkan lebih banyak turun daripada naik sehingga riak tetap ada.

@stavlocker ok maka itu berbeda. Saat mencoba men-debug ini (sebelum saya menyadarinya adalah -webkit-app-region) saya menambahkan logging di sekitar mouse ke bawah / atas dan juga mengamati lebih banyak penurunan daripada naik.

Jadi jika Anda mencolokkan mouse biasa, apakah itu berfungsi dengan baik?

@gtsafas Anda dapat mereproduksi perilaku dengan mouse dengan mengklik tombol kiri dan kanan secara bersamaan.

kami juga mengalami masalah ini. Anda mungkin mencegah kejadian mouse di tempat lain ... periksa kode Anda untuk sesuatu seperti:

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 Kita harus mencegah default invariant. Mungkin ada yang salah.

@kgregory @oliviertassinari
Saya tidak yakin apakah ini benar, tetapi inilah yang saya temukan setelah sedikit pengujian:
Entah bagaimana ini terjadi ketika sebuah klik berinteraksi dengan menu konteks dengan cara yang aneh. Saya menguji ini dengan gagal membuat riak tetap ada dengan: onContextMenu={e => {e.preventDefault()}} di ButtonBase. Sepertinya Anda tidak dapat mendeteksi saat klik terjadi pada menu konteks tetapi saya rasa saya telah berhasil memperbaikinya dengan menghentikan riak pada acara menu konteks: # 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}

Adakah yang bisa mengkonfirmasi?

@ 0maxxam0 mendanai masalah ini dengan $ 40. Lihat di IssueHunt

Ini harus diselesaikan dengan # 13740. Jika Anda dapat mereproduksi masalah tersebut dengan versi terbaru, beri tahu kami!

@oliviertassinari @kgregory Saya masih bisa mereproduksi, seperti yang sudah saya katakan di # 13740. PR ini hanya memperbaiki spamming menu konteks, tetapi bukan spamming trackpad. Komentar ini menjelaskan masalah yang saya derita dan menawarkan dua solusi.

Cara mereproduksi:

1. Buka demo komponen tombol
2. Gunakan trackpad Anda untuk mengklik tombol beberapa kali

Saya menggunakan Lenovo Yoga 700 yang menjalankan Windows 10, dapat mereproduksi di Chrome 71, Firefox 64 (Quantum), Edge 42.

Saya yakin ini dapat direproduksi pada komputer yang berbeda, karena masalahnya adalah trackpad mendaftarkan banyak jari dan kadang-kadang tidak mendaftarkan naik mouse sebanyak mouse turun, seperti yang telah saya simpulkan dalam pengujian saya

Saya melihat bayangan riak tombol kumulatif di peta telepon saya, aplikasi reaksi mui di iPad. di Android dan Web tidak ada masalah. Setiap kali saya mengklik tombol itu menjadi lebih gelap (atau lebih terang) sampai jenuh.

Saya dapat mengonfirmasi masalah ini di Safari / iOS juga - bahkan tidak perlu mengetuk dengan cepat, overlay gelap / terang tidak pernah hilang setelah mengetuknya.

@oliviertassinari @kgregory Saya masih bisa mereproduksi, seperti yang sudah saya katakan di # 13740. PR ini hanya memperbaiki spamming menu konteks, tetapi bukan spamming trackpad. Komentar ini menjelaskan masalah yang saya derita dan menawarkan dua solusi.

Cara mereproduksi:

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

Saya menggunakan Lenovo Yoga 700 yang menjalankan Windows 10, dapat mereproduksi di Chrome 71, Firefox 64 (Quantum), Edge 42.

Saya yakin ini dapat direproduksi pada komputer yang berbeda, karena masalahnya adalah trackpad mendaftarkan banyak jari dan kadang-kadang tidak mendaftarkan naik mouse sebanyak mouse turun, seperti yang telah saya simpulkan dalam pengujian saya

Jika masalahnya ada lebih banyak peristiwa mousedown yang diaktifkan daripada mouseup, kita harus melihat apakah ada jumlah mouseup yang sesuai di luar elemen itu. Salah satu trik untuk hal-hal semacam ini Anda dapat menambahkan pengendali mouse ke atas (yang akan menghapus dirinya sendiri) ke elemen root DOM pada mouse ke bawah, lalu mouse ke atas akan selalu menyala, di mana pun mouse diambil. Saya curiga selalu ada beberapa peristiwa yang diaktifkan untuk memicu pembersihan, tetapi mungkin tidak pada elemen asal.

@CaptainN Di iOS / Safari apa Anda mereproduksi ini. Saya tidak dapat membuat ulang di iOS 12.1.2

iOS 11.3.1 - kebanyakan saya melihatnya di komponen IconButton, tetapi juga di Fab.

Sepertinya itu seharusnya:

1. Animasikan lingkaran dari titik sentuh.
2. Fade out (alpha) saat membuat animasi.
3. Saya berasumsi dihapus dan dibersihkan setelah animasi selesai.

Langkah 2 dan 3 untuk saya tidak terjadi di iPad saya (11.3.1) dan iPhone yang lebih lama (11.4.1) atau iPhone 8 (12.1.2).

Saya akan melihat apakah saya bisa menggali kode di beberapa titik, tetapi tidak bisa membuat janji tentang waktu.

@CaptainN Apakah ini ada di demo dokumen, atau kode Anda sendiri? Saya tidak dapat mereproduksinya dengan dokumen di iPhone 10 dengan iOS 12.1, atau iPad yang lebih lama dengan 12.1.3, jadi saya bertanya-tanya apakah ada faktor perancu yang berperan?

Tidak mengatakan itu bukan bug, tetapi mungkin ada lebih banyak langkah yang diperlukan untuk mereproduksinya.

Ada di aplikasi saya sendiri, yang merupakan aplikasi berukuran sedang yang dibangun dengan Meteor, React, dan Material-UI. Ini akan segera menjadi publik, jadi saya bisa membagikan link.

Saya berdua akan mencari penyebabnya dalam kode di beberapa titik, dan jika saya tidak dapat menemukannya, coba buat pengurangan.

Saya juga menggunakan SSR - Saya mendapatkan beberapa peringatan tentang atribut gaya yang tidak sesuai, biasanya server atau klien tidak menyetujui awalan -webkit- - mungkinkah ada hubungannya dengan itu? Saya sebenarnya tidak begitu yakin bagaimana material-ui menerapkan awalan (autoprefixer) - apakah ada dokumen tentang itu?

Ini mungkin membantu:
https://material-ui.com/getting-started/supported-platforms/#css -prefixing

Saya juga mengalami masalah ini di lingkungan saya sendiri menggunakan Meteor, React, dan Material-UI dan hanya di iOS. Saya telah dapat menggunakan emulator perangkat Chrome dan hanya membuat bug ini terpicu saat meniru perangkat iOS dan bukan perangkat Android.
Sepertinya saya belum bisa meniru ini dengan kotak pasir demo tetapi mungkin berasal dari komponen ButtonBase karena saya melihat masalah dengan tombol dan tab.

Saya sekarang melihat ini bahkan di Chrome pada Windows dengan mode seluler diaktifkan di Alat Pengembang. Di aplikasi ini: https://www.pixstoriplus.com/

@CaptainN Saya akan melihatnya nanti. Demi kejelasan, Anda dapat memposting langkah-langkah reproduksi Anda. Chrome apa yang Anda gunakan?

Itu melakukannya dengan cukup konsisten sebelumnya, tetapi sekarang saya mencoba mereproduksinya di Chrome, tidak ada. Sesuatu pasti telah memasukkannya ke dalam status kesalahan.

Di iOS, Anda bisa memuat aplikasi itu dan melihat masalahnya dengan mudah. Ketuk bolak-balik antara tombol beranda dan pencarian di navigasi bawah untuk contoh termudah. Atau ketuk cari, lalu kembali ke rumah, dan tekan rumah beberapa kali.

Saya dapat membuatnya kembali di iOS di navigasi bawah.

Saya bisa mendapatkan perilaku yang lebih konsisten jika Anda memuat ulang halaman setelah beralih dari Chrome biasa ke mode perangkat.

@ zuus-keith Jika ini terkait dengan simulator seluler chrome dev tool, itu bukanlah sesuatu yang harus kami perbaiki secara khusus. Kecuali itu akar penyebab yang sama?

@oliviertassinari Saya percaya itu adalah akar penyebab yang sama. Saya awalnya menemukannya di perangkat iOS yang sebenarnya, kebetulan simulator seluler chrome dev tool yang disetel ke tampilan 'iPhone' atau 'iPad' menghasilkan perilaku yang sama.

Sebagai tambahan, sejauh ini masalah tersebut hanya dilaporkan pada 3 contoh berbeda tetapi semuanya menggunakan tumpukan teknologi yang sama (yaitu Meteor, React dan MUI).

Hal ini ternyata disebabkan oleh paket Meteor yang sangat umum lainnya yang disebut "fastclick" - yang sebenarnya tidak diperlukan (jika Anda menggunakan pengaturan viewport yang benar) di Safari selama bertahun-tahun. Jika ada yang terjadi dalam masalah ini, solusinya adalah dengan menghapus "fastclick".

Apakah ada orang yang terpengaruh oleh ini dan tidak berada dalam lingkungan simulasi? Atau apakah saya tetap bisa menutup ini?

Ini diperbaiki untuk saya di lingkungan non-simulasi (di iPad) dengan menghapus paket fastclick dari aplikasi meteor saya.

Tutup untuk saat ini, jika ada yang bisa mereproduksi beri tahu kami.