Swipable tabs not allowing for interaction with form elements within it in mobile view/devices

[Ifeo-A]

Expected Behavior

When enabling swipe functionality with the tab components a user using a mobile device should be able to interact with form elements that are within the tab content area.

Current Behavior

When the swipeable option is set to true on the tab component the user is able to swipe between the tabs and interact with form elements as normal, but on mobile devices the user is not able to interact with form elements but is able to swipe between the tabs.

Possible Solution

I think the user is not able interact with the form elements in a swipeable tab content area because the page is not able to decide fast enough if the user wants to swipe or just wants to tap on something and so when the user places a finger on the screen to tap the screen sensors pick-up minor horizontal movements and interprets that the user wants to swipe.

Steps to Reproduce (for bugs)

1. Place a materialize css tab element in a view
2. In the tab content area (where the div id is) place a <form> and insert a materialize css <select> component in it with some options and also insert a file input field.
3. Initialize the tabs with $('ul.tabs').tabs({swipeable:true});
4. Initialize the select component with $('select').material_select();
5. Load the developer view in your preferred browser and select the mobile views
6. Try to select an option from the select menu or to upload a file with the file input component. It will be found not to be working in mobile view
7. Exit out of developer view
8. Try to select an option from the select menu or to upload a file with the file input component within a desktop context. It will be found that the user is then again able to swipe and interact with the form elements as normal

Context

I am trying to get the same functionality on mobile for form elements within a tab component to work as it does on desktop.

Your Environment

• Version used:
• Browser Name and version: Chrome Version 60.0.3112.90(Desktop), Chrome(Android mobile) and Safari(iPhone 6)
• Operating System and version (desktop or mobile): Windows 8.1
• Link to your project (if appropriate):

[RomainSanchez]

On desktop it works but a cordova app ran in desktop broswer does not work even for simple text inputs

[tomscholz]

Possible duplicate of #4380

[edimuj]

Yes, it certainly looks like a duplicate, but #4380 is closed for some reason, but I can confirm that this is still an issue on both iOS and Android as well as in the Chrome developer view (as a touch device). Having form elements, including Collapsibles within a tab component, doesn’t work if you want to interact with them with touch events. Tapping on elements, swiping etc. just doesn’t work. The events are ignored.