Materialize: swipeable and onShow Not Working Together in tabs

[alyeldegwy]

When trying to use onShow will using swipeable as setting for the tabs
onShow not Working

when i remove swipeable, onShow works fine am i doing something wrong or this is a BUG?

[fega]

Hello @alyeldegwy, please follow the contributing guidelines, and fill the Issue form

thanks

[sandor]

Guys, I can second this bug.

This will not work:

$('#tabs-swipe10').tabs({ 'swipeable': true, onShow: function(tab) { console.log(tab); } });

This is working:

$('#tabs-swipe10').tabs({ onShow: function(tab) { console.log(tab); } });

Any workaround for this? Would be highly appreciated...

[lordplagus02]

Can I third this bug? Cuz I'm experiencing this too.

[tomscholz]

Can I third this bug?

What do you mean?

[lordplagus02]

Well @sandor seconded the bug... and I was third... so... anyway point is I have almost the exact same code as he and it doesn't work. Also worth noting is _no error message is displayed in console_.

[DanielRuf]

@lordplagus02 can you provide a codepen to show this?

[sandor]

@DanielRuf – sure Daniel here are two codepens demonstrating the problem...

Works if we click on the tabs:
http://codepen.io/sandor/pen/OmMOBP

Will not work on swipe or on tab-klick:
http://codepen.io/sandor/pen/pPgdXw

This should work if possible also on swipe...

[tomscholz]

Works for me though

[tomscholz]

@sandor Do you get any errors?

[DanielRuf]

Works for me though

Click the tabs and take a look at the console, no output on the second codepen.

[DanielRuf]

onShow is not called in combination with swipeable, see https://github.com/Dogfalo/materialize/blob/50c67184fd152150f4d6ff3e2e807e9b1ca49e8d/js/tabs.js#L185-L196

Bug or not?

[tomscholz]

Idk. Ask @acburst @Dogfalo :)

[DanielRuf]

No info on this behavior here: http://materializecss.com/tabs.html
http://materializecss.com/tabs.html#swipeable
http://materializecss.com/tabs.html#options

[sandor]

@tomscholz – nope nor errors on my side. Just no output to the console (you should use the console of safari and not the one of codepen)....

[tomscholz]

@sandor Yeah, ^^ I know. I was looking at the wrong pen. You are right. No output. in devtools ;)

[sandor]

@tomscholz – hehe, I know it is uncool to use safari ;-) but I like the look ;-)

[vpezeshkian]

So, what's the fix for this? Any hacks before the fix come out, I'm on 0.98.0
BTW updating to 0.98.2 will break my tabs which is {swipeable: true}

[DanielRuf]

BTW updating to 0.98.2 will break my tabs which is {swipeable: true}

Is this another issue?

The change was done before 0.98.0 was released https://github.com/Dogfalo/materialize/commit/5adccdbfee9433568d0dfeacabe0e99c46a35daa#diff-3dd5119e1daf5898ff764a06ac0aca24L135

Which is the last version where it worked with swipeable?

Not sure how and if we can add the onShow call after https://github.com/Dogfalo/materialize/commit/5adccdbfee9433568d0dfeacabe0e99c46a35daa#diff-3dd5119e1daf5898ff764a06ac0aca24R166

[sandor]

guys, sorry for my ignorance, but I am a bit confused now. So 0.98.2 has a fix for this bug? Or does 0.98.2 breaking swipable tabs? Hard for a beginner like me checking all the possibilities :-)

[DanielRuf]

guys, sorry for my ignorance, but I am a bit confused now. So 0.98.2 has a fix for this bug?

No, still no fix.

Or does 0.98.2 breaking swipable tabs?

Not sure what @vpezeshkian meant.

[sandor]

Just a naive question here – would it be possible to introduce some callbacks for this (I think this is than also related to some other components that are using the slider) like in slider.js (http://idangero.us/swiper/api/#.WPpzOTZ3VW8) – something like onXXXX(swiper, event)... Not that I could code this. But I wish I could.

[DanielRuf]

We could copy it but as already mentioned, not sure if bug or how it should work. @Dogfalo
and @acburst are the maintainers who can tell more as this is not described in the docs

https://github.com/Dogfalo/materialize/issues/4545#issuecomment-295362079

[DanielRuf]

@sandor could you try something like

    if (options.swipeable) {
        if ($tabs_content.length) {
            $tabs_content.carousel('set', index);
            if (typeof(options.onShow) === "function") { // add
                options.onShow.call(this, $content); // these
            } // lines
        }
    }

[edinantox]

@DanielRuf i got TypeError: $(...).find(...).get(...) is undefined

[sandor]

@DanielRuf Thanks Daniel ! – will give that a try tomorrow... Too much red wine for now :-)

[DanielRuf]

@edinantox updated the code, please test again.

@sandor please provide a codepen for us so we can check it with your markup.

[edinantox]

@DanielRuf directly, but i'm trying other things

[DanielRuf]

Ok, seems we can directly use $content, missed that.

[edinantox]

@DanielRuf i already try to use $content, but no deal, only click works =(

[DanielRuf]

Right, just the click event is caught there using on.

Will check that later tomorrow (saturday).

Not sure but there is probably another part for the swipe / drag event.

[DanielRuf]

I guess onCycleTo is where we have to add this call.

Would be cool if someone could help me testing. =)

        onCycleTo: function(item) {
            if (!clicked) {
              var prev_index = index;
              index = $tabs_wrapper.index(item);
              $active = $links.eq(index);
              animateIndicator(prev_index);
              $content_tab = $(item[0].hash); //add
              if (typeof(options.onShow) === "function") { // these
                  options.onShow.call(item, $content_tab); // lines
              } // here
            }
          },

[sandor]

@DanielRuf Hey Daniel, sorry for the late replay. Do you have a complete script that I could test? Would give it a try...

[DanielRuf]

Currently not. You can copy the raw dist/js/materialize.js, host it on https://gist.github.com, change/add the lines, copy and paste the gist URL at https://rawgit.com and use the development URL in the codepen instead of the CDN hosted Materialize script.

[sandor]

@DanielRuf Hey Daniel, I have done my best. I have never worked with gist and stuff like that, and I am not a developer. I was not able to create the rawgit url so I used the raw URL from the gist. I have re linked my original codepen here http://codepen.io/sandor/pen/pPgdXw with the gist file. I can confirm that now clicking on the tabs will give the desired info in the protocolle. Swiping will also cause the console to show "something" – but the result is to cryptic for a poor designer like me... Anyhow – nor error message that I can see... But maybe you just have a look at the codepen/gist?

[DanielRuf]

I will check that tomorrow.

[vpezeshkian]

Sorry for the late input, I wasn't clear in my post that I'm talking about 2 different issues. I have materializedcss as module in dependencies and when upgrading it to latest v0.98.2 my existing code breaks. Yes, tabs do not work as it should.

And the other issue which is this thread, those two options (swipeable and onShow) do not work together. Any fix yet?

[DanielRuf]

And the other issue which is this thread, those two options (swipeable and onShow) do not work together. Any fix yet?

https://github.com/Dogfalo/materialize/issues/4545#issuecomment-296324429 and the rest of the thread

[DanielRuf]

Also https://github.com/Dogfalo/materialize/issues/4545#issuecomment-296324429

If this is another issue please open a new issue for it here at GitHub

[goodits]

Just leaving a +1 as I'd love to be able to use swipeable and onShow together.

[acburst]

Fixed in 8129f11

[newpen]

It's returning the wrong tab when swiping.