Fixed tabs in demo are broken

[dortzur]

Trying to to change between fixed tabs in the Layout section is broken, throws an exception. Also lot's of "React is not defined" error floating around

[tleunen]

The React is not defined is an issue only on the website, not sure yet to know why it's happening.
Thanks for reporting the issue with the Tabs, will definitely take a look at it.

[worrel]

The charAt issue with tabs is because the tab JS expects an href like '#some-id' on each tab which it then strips the '#' off of & attempts to find a layout-tab-panel with the corresponding ID to show. This sucks because with React you'd really like to have only the active tab in the DOM & switch it out based on state change. Not sure if you can just catch the click event & preventDefault, but you'd likely lose the ripple effect.

[HriBB]

Hey. I can confirm this. Any ideas how to fix it?

[HriBB]

Until there is a proper fix, this is the ugly workaround to get rid of the error

Header

<HeaderTabs activeTab={activeTab}>
  <Tab href="#salon-info">Info</Tab>
  <Tab href="#salon-customers">Customers</Tab>
  <Tab href="#salon-services">Services</Tab>
  <Tab href="#salon-brands">Brands</Tab>
  <Tab href="#salon-gallery">Gallery</Tab>
</HeaderTabs>

Content

<Content>
  {this.props.children}  
  <div className="mdl-layout__tab-panel" id="salon-info">Info</div>
  <div className="mdl-layout__tab-panel" id="salon-customers">Customers</div>
  <div className="mdl-layout__tab-panel" id="salon-services">Services</div>
  <div className="mdl-layout__tab-panel" id="salon-brands">Brands</div>
  <div className="mdl-layout__tab-panel" id="salon-gallery">Gallery</div>
</Content>

Styles

.mdl-layout__tab-panel {
  display: none !important;
}

[HriBB]

Furthermore, I get an error if I show/hide HeaderTabs

DOMChildrenOperations.js:67 Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

So I have to hide them with css

Last, ripple effect does not work on Tabs.