Materialize: Input not clickable in carousel using mobile device

[ministicraft]

Description

I install the latest release of materialize and now my input in my carousel does not response when I click on it.

Repro Steps

You can see it on materialize web site when you try to click in the dataindicator

Sorry for my bad english

[fega]

Can you provide a better way to reproduce the issue? I cannot found it

[MaksymShostak]

I can reproduce the issue in iOS e.g. navigate to http://materializecss.com/carousel.html and try to tap a carousel item to move to it and tap again to try to navigate to the link - both won't work

On the desktop, you can reproduce this in Chrome

1. Open http://materializecss.com/carousel.html
2. F12 (Developer Mode)
3. Ctrl + Shift + M (Toggle Device Menu)
4. Select the iPhone 6 Plus preset
5. Refresh the page
6. Attempt to navigate to a carousel item using a click - won't work
7. Attempt to click a link in a carousel item to navigate to it - won't work

These are the result of commit 5d6868680a2ae27e837f26454e6af3f0e600066f
Reverting that change (removing e.preventDefault() for the tap function) results in the intended behaviour for iOS. Maybe you can add a check that it would only preventDefault() if the detected browser is Firefox to fix the issue referenced in the commit?

[NathanUrwin]

As of v0.98.2 clicking carousel links on mobile (android for me) still doesn't work.

[ghost]

Is there any temporary hack/fix to solve this? Need ASAP 😃

[NathanUrwin]

@DavisMiculis You have to remove e.preventDefault(); from function tap(e) { ... } in materialize.js. Check out the comment above mine. @MaksymShostak Thanks!

NOTE: I only tested this in Chrome DevTools on desktop, so your mileage may vary.

[ghost]

@tuxredux this means to manually change materialize js source? Any way of doing without touching materialize source files?

[NathanUrwin]

@DavisMiculis Yeah AFAIK you will have to edit materialize.js. You asked for a temporary hack/fix ASAP, and since it's just removing one line it seems like a reasonable solution to me...

Unless of course you don't have access to the file for whatever reason. I'm not a javascript developer myself so I won't be able to help any further, but this seems like a good place to start.

[ghost]

@tuxredux okay, thanks for help!

[Dekker1]

I ran into the same/a similar problem where adding a input item in the carousel wasn't clickable.
The problem is shown in this codepen: https://codepen.io/anon/pen/VbNzap
It is not possible to select the input element.

This problem is solved by removing line 343 in the current carousel.js file: https://github.com/Dogfalo/materialize/blob/6e317e21367b826a9e3f49c77257e189ad883106/js/carousel.js#L343

[DanielRuf]

Is this still an issue? The current master branch should contain a fix for this.

[Dekker1]

@DanielRuf I'm afraid my issue is not solved by the solution in the current release. Commenting out the if-statement restores functionality again.

[acburst]

Fixed in 58224d7239399f05721cdbc2af90f2d73f6f6a78

[patrickonparker]

Definitely still not fixed, I can't do anything with a carousel on mobile.

patrickonparker.com

[tomscholz]

@patrickonparker What do you mean? The carousel on your website seems to work fine for me. Can you provide us a codepen that exactly shows what the problem is?

[patrickonparker]

I'm afk right now but loading my site in mobile Safari I'm not able to tap on the link around each image to open the modal, or swipe between items in the carousel.

[sonAndrew]

Im actually having the same problem, on mobile not able to swipe between items in the carousel. Need help with this problem already removed 'e.preventDefault();' and still nothing.

[DanielRuf]

@patrickonparker @sonAndrew which version of Materialize do you use?

[Bienio]

i have this problem too. On mobile not clickable input field(radio,checkbox, textinput....) in carousel.
Use last version 0.100.1

[rmard]

My problem was similar: clicking on a fixed button (inside the carousel-fixed-item div) the action/href wasn't working.

The only way I could solve this is:
1) Cut the carousel-fixed-item div
2) Paste it right after the carousel (external div), with style="z-index: 2; position:absolute!important; bottom: 15%; width: 100%"
3) Create a "carousel-wrapper" with style="position:relative"

Doing this, the "new" carousel-fixed-item is actually outside the carousel, so it's not affected by the e.preventDefault() code.

[prgpascal]

Same issue here, cannot swipe the Carousel on mobile devices.
I use the current version of Materialize (v0.100.2).
This issue did not occur with Materialize v0.98.2.

[MegaSunCat]

Same issue here,
I cannot swipe the Carousel on my iPhone.

[MegaSunCat]

I don't get it, I'm talking about the carousel being able to be swiped by touch. How does using the form tag help?

[DanielRuf]

@MegaSunCat the other issue was just referenced. The problem is that the click / tap event is catched and not properly delegated to child elements.

[brunoneumann]

Same issue here. I can't use swipeable (v0.100.2) with simple text inputs on a cordova app. It works on v0.99.0.

[Gurofo]

@rmard solution works for me!

[x10sys]

Confirmed; works with 0.99.0, but not with 0.100.2.

[DanielRuf]

Did you test v1 1.0.0 alpha x?

[x10sys]

Where do i get beta version of v1? On CDN, I can only see alpha versions.

[DanielRuf]

Sorry, meant alpha ;-)

[x10sys]

Tried latest alpha - it's working on mobile but performance is awful (comparing to demo - not nearly as smooth). You can take a look: https://youtu.be/e2PKCQuMxu8 and on desktop it's even worse. No JS errors in console.

[DanielRuf]

So it works at least ;-)

[x10sys]

I have just discovered on my wordpress that it's a theme-related "bug" (OceanWP theme). It works flawlessly with other themes. Will report on my progress.