search

tleunen / react-mdl

React Components for Material Design Lite
https://tleunen.github.io/react-mdl/
MIT License
1.76k stars 255 forks source link

On 1.7.1 Tabs won't get upgraded automatically #394

Closed igorsantos07 closed 7 years ago

igorsantos07 commented 8 years ago

Using <MDLComponent><Tabs>[...]</Tabs></MDLComponent> works :B

tleunen commented 8 years ago

Are you talking about Tabs in the HeaderTabs, or the generic Tabs component?

Because these tabs work fine, I can see the ripple for example, same for the HeaderTabs in the example with the 6 tabs.

What's your issue exactly?

igorsantos07 commented 8 years ago

These tabs do not display ripples :) This codepen is based on the example's code - I just doubled the Tabs, so I could create one that was wrapped by MDLComponent to display my findings.

tleunen commented 8 years ago

Hmm weird, it looks like it doesn't get upgraded. I'll investigate

igorsantos07 commented 8 years ago

As mentioned on #380, I'm bringing here the codepen displaying HeaderTabs that seems to be upgraded (they do have the colored underline) but have no ripple effect

Place1 commented 8 years ago

Can confirm i'm getting this issue as well. Something i noticed was that it worked with the official MDL js/css. I'm porting a react UI that used MDL without this library. I had the Tabs all working and then my last step was to swap out the MDL css/js from google with the one from this library and then it broke.

not sure if that's any help but i thought i'd let you know :D

vitalets commented 7 years ago

Also can confirm this issue. Would appreciate the fix..

tleunen commented 7 years ago

Thanks for the info @Place1. I'm very busy still for a few days so I won't be able to take a closer look and find a fix. So any help is welcome

gabrielbull commented 7 years ago

Me too, having the same issue.

DirtyHairy commented 7 years ago

The heart of this issue is the component upgrade not handling functional components correctly. In addition, ripple requires upgradeElements (not the plural :smirk:) instead of upgradeElement to be called on the element. Both issues never show up on the doc pages as upgradeElements is called on the whole page during bootstrap there.

The above PR #421 fixes these issues.

tleunen commented 7 years ago

Good catch @DirtyHairy! I'll take a look at the PR tomorrow.

DirtyHairy commented 7 years ago

Thanks alot, @tleunen :smile: I'm in the progress of collecting similar ripple effect fixes (updateElements vs upgradeElement) as we stumble upon them in our project, but I'll keep these in a branch for a later pull request.

Place1 commented 7 years ago

Yeah good stuff!

On Friday, 21 October 2016, Tommy notifications@github.com wrote:

Good catch @DirtyHairy https://github.com/DirtyHairy! I'll take a look at the PR tomorrow.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/react-mdl/react-mdl/issues/394#issuecomment-255268208, or mute the thread https://github.com/notifications/unsubscribe-auth/ALMBlotnoAGkAlY-9DZywPZA4VQ_-QpHks5q2A-PgaJpZM4J5pcx .

marcelpanse commented 7 years ago

I also need this, can the PR be merged?

tleunen commented 7 years ago

Merged and released as 1.8.0