[ListItem] rightIconButton doesn't prevent ripple on mobile

[EloB]

It works in desktop without the ripple.

Here is an example:

• Visit https://mtg.zone (site only works on chrome and safari because I use websql)
• Make your screen small so you see the icon on the top right menu
• Add a card to deck
• Click on the top right icon
• Tap (with a touch event) on the zoom button to trigger the ripple

Touch tap

Mouse click

[heetvachhani]

Hi @EloB I tried to reproduce this in desktop using step you described but for me it's working perfectly fine. I'm using Chrome (Version: 48.0.2564.116)
I've also checked in Safari(Version: 9.0.3) working fine there too.

Here's the Mouse Click example:

[nathanmarks]

@heetvachhani What happens when you use chrome dev tools to simulate a touch?

That reproduces it for me:

[heetvachhani]

Yes that reproduced for me 😁

[tintin1343]

@EloB : I'm trying to fix this and was trying to reproduce it. So I wanted to understand the structure of the list that you are using.

Can you shed some light on this. Check this page from our docs site and see if you find issue with the nested lists.

[tintin1343]

@EloB : So, I tried reproducing the issue you are having on the docs page and I was able to do it on the nested list example which looks similar to your use case.

I noticed the nested list-item did not let the touch ripple bubble up to the list-item parent. However the parent list-item labelled "inbox" behaved in the same way as your use-case.

I added the prop disabled={true} to the parent list-item labelled "inbox" and that solved the problem. The ripple can be seen on touch only but not on click of the list-item since its disabled. I bet the problem with your use-case is similar.

Let me know, if this solves the problem.

@nathanmarks : Is this an bug in our docs page? I see it as more of a use-case thing.

[EloB]

Im getting the bug on the docs as well.

[EloB]

I need to be able to click the list and also the rightButtonElement. So disable it will only make the rightButtonElement to work right?

[EloB]

I think the way ListItem triggers the ripples are kind of broken. On a phone it triggers the ripples everytime you touch them. Very annoying when you scroll the page. Maybe this is another bug. Should I make another issue with that? Try this on a phone and scroll down the page: https://mtg.zone/#/sets

[tintin1343]

@EloB : Yes. I did enable touch on devtools. Thank you for explaining your use-case.
Yes you are right. The list-item won't be clickable but the icon will be. I misunderstood from your screengrab. Now that I know what you are trying to achieve, let me try and see if it is fixable.

Also, i checked your website on phone. The list-item, is not clickable when I tried it through my phone. only the right-icon is clickable.

[EloB]

By clicking on the ListItem it should decrease the left avatar number by one.

[tintin1343]

The clicking the ListItem it should decrease the left avatar number by one.

Doesn't work in mobile chrome browser. It closes the side nav when I click on the list-item. Anyway, Let me see what I can do.

[EloB]

Oh that's because its the last item if you have more than one card in the deck. Then you will see that is decreases.

[tintin1343]

@EloB : Yeah I did see that. Thanks!

[EloB]

Thanks for solving this issue! 👍

[tintin1343]

@EloB : No worries man. Happy to help! Best of luck with your project.