Materialize: Carousel Button doesn't work on mobile

[econsolo]

Expected Behavior

Button in Full Width Carousel working in mobile as it works in desktop.

Current Behavior

In mobile, the button tag _or link tag_ doesn't trigger any click event.

Steps to Reproduce

1. Check this example on CodePen;
2. Open Developer Tools _(F12 on Google Chrome)_;
3. Select _Toggle device toolbar (Ctrl + Shift + M)_ to simulate a mobile;
4. Refresh the page (F5) when switch to mobile version;
5. You should have seen an alert as it worked in desktop;
6. You can use a smartphone too.

Context

I'm working with _Progressive Web Apps_ and I chose Materialize to supply my need to Material Design. I need it working on desktop web and mobile.

My Environment

• Materialize version used: 0.100.1;
• Browser Name and version: Desktop: Google Chrome v59.0.3071.115 x64; Mobile: Google Chrome v59.0.3071.125;
• Operating System and version: Desktop: Windows 7 Ultimate x64; Mobile: Android 7.1.1;
• Link to CodePen for examples: CodePen Link.

[penguoir]

I think the trouble might be because of the onclick="". Try using an event handler in Javascript:

$('.btn').on('click touchstart', e => {
  alert('working')
  console.log('working')
})

It's better if you give an id to the button and then you can select it with jQuery as $('#id')

Hope this helps!

[econsolo]

Yeah, it works great! But in my case i'm using Angular 4 for handle click events.

Something like this: <button (click)="foo();">Click</button>

Do you know any kind of solution for it?

If necessary I can do a plunkr showing this issue but with Angular 4.

Thanks for your attention!

[qweluke]

this looks like similar issue:
https://stackoverflow.com/questions/45464748/materializecss-tabs-with-buttons-not-working-on-mobile

[qweluke]

@penguoir @econsolo I think i found why this is not workin on mobile.
It's caused by swipeable -> $tabs.tabs({swipeable: true}); in my exception.
If this option is set, click event is not working on mobile, because it waits for swipe.

[econsolo]

@qweluke
As the Carousel use swipe by default are you saying that this issue is simular than tabs click on mobile with swipeable: true ?

For a while, I'll try to implement a separated button below the carousel to handle click events on Angular 4.

[qweluke]

I'm pretty sure that this causes our problems :-(

[DanielRuf]

Carousel uses tabs in small screens. What happens when you use event.stopPropagation();?

[penguoir]

This is off the top of my head;

Maybe this is a problem with the carousel button event listener? Perhaps it only listens for click but doesn't listen to touchstart and therefore doesn't trigger on mobile?

Just a hunch. I'll look into it more.

[DanielRuf]

If it is jQuery it will also catch touchstart when listening for click events. Should be the same in modern browsers?

[econsolo]

This issue also occurs in Dropdown

[aakashgupta96]

I am also facing the same issue. Any temporary solution to this?
Working fine on desktop, but not on mobile.

[ddiaz914]

Hey everyone, I was having an issue wherein my carousel swiping worked fine on desktop and did not work at all on mobile. After spending some time looking at the docs and the changes made from each version, I found a solution. Replacing in carousel.js

 function setupEvents() {
          if (typeof window.ontouchstart !== 'undefined') {
            view.on('touchstart.carousel', tap);
            view.on('touchmove.carousel', drag);
            view.on('touchend.carousel', release);
          }
          view.on('mousedown.carousel', tap);
          view.on('mousemove.carousel', drag);
          view.on('mouseup.carousel', release);
          view.on('mouseleave.carousel', release);
          view.on('click.carousel', click);
        }

from version v0.100.0 and up with what is found in previous versions

function setupEvents() {
          if (typeof window.ontouchstart !== 'undefined') {
            view[0].addEventListener('touchstart', tap);
            view[0].addEventListener('touchmove', drag);
            view[0].addEventListener('touchend', release);
          }
          view[0].addEventListener('mousedown', tap);
          view[0].addEventListener('mousemove', drag);
          view[0].addEventListener('mouseup', release);
          view[0].addEventListener('mouseleave', release);
          view[0].addEventListener('click', click);
        }

Fixed my issue. Hope this helps everyone else.

[semitaho]

Thanks, it really works great! But how to include the pasted code above into current version of materialize (0.100.2) without downgrading to 0.99.0. There are quite a lot of style changes between 0.99.0 -> 0.100.x and I really don't want to walk through all of them again (Angular 2 Materialize).

[chaitanyabd]

Confirmed this bug still exists. I used @penguoir 's method - but I really think links that already have an href should not need special handling just because they're on a carousel + mobile.

[tonystaark]

It seems that the creator of Materialize didnt do a good job in solving this issue. This bug has persisted for quite some time.

[sweezed]

Is this going to be fixed?

[Dogfalo]

Yes, we are also working on other issues on the v1-dev branch, so it is a matter of time.

[davinderkumar]

I'm also facing this problem.
is there a fix for this now?