Settng tabActive when using animated does not set tab active visually

1

Probably related to Adding 'tab-active' for animated tabs does not make tab visible by default

React issue. Setting tabActive to a tab that is not the very fisrt tab does now work when animated property is set.
Following code only works when animated property is taken out.

<Tabs animated>
       {
                 view_part.TabComponents.map((val, idx) => (
                        <Tab
                            id={`tab-${val.id}`}
                            key={val.id}
                            className="page-content"
                            tabActive={val.id === active_entity}>
                                {
                                       <val.Component doc={doc} />
                                }
                       </Tab>
               ))
     }
</Tabs>

It sets the class ‘tab-active’ correctly, but what is missing is the transform style on the wrapper div with class tabs. Style only appears on clicking one of the tabs.

<div class="tabs" style="transform: translate3d(-100%, 0px, 0px);">
  <div id="tab-phases" class="page-content tab">
    <h1>Phases</h1>
  </div>
  <div id="tab-grades" class="page-content tab tab-active">
    <h1>Grades</h1>
  </div>
</div>
2

If you add it to page component after page init, then it needs some manual work I guess. You can just set manually style.transform on <Tabs> component which will equal to

`"${-100 * activeTabIndex}%"`
3

Tab component renders into two divs like this:

<div class="tabs-animated-wrap">
      <div class="tabs" ...

So the following code works, but I am now mixing plain html with React markup for the tab:

                <div className="tabs-animated-wrap">
                    <div
                        className="tabs"
                        style={{ transform: `translate3d(${-100 * view_part.TabComponents.findIndex(i => i.id == active_entity)}%, 0px, 0px)` }}>
                        {
                            view_part.TabComponents.map((val, idx) => (
                                <Tab
                                    id={`tab-${val.id}`}
                                    key={val.id}
                                    className="page-content"
                                    tabActive={val.id === active_entity}>
                                    {
                                        <val.Component doc={doc} />
                                    }
                                </Tab>
                            ))
                        }
                    </div>
                </div>

If I don’t do it that way then the style is applied to tab-animated-wrap div.

But it is a good enough workaround. Thanks.

1 Like