classNameTabStrip disappears after moving a tab/tabset

[axeldvera]

Hi guys. First of all, congratulations on this great react component.

I have a tabset with a custom classNameTabStrip that I use to change the header color for each tabset.

the problem is that when I move a tabset/tab somewhere else, the class magically disappears.

You can see in the images that, after moving "Music Broadcast" within "Advertising Broadcast", it loses color.

If I inspect it with google tools, it turns out that the custom class I added with "classNameTabStrip" no longer exists...

I appreciate any help you can give me. Greetings

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1- add a custom class to a tabset with the "classNameTabStrip" property 2- use the created class to change the background color of the tabset 3- move the tabset inside another tabset

Expected behavior

You can see that the color of the tabset header disappears

Operating System

Windows

Browser Type?

Google Chrome

Browser Version

118.0.5993.118

Screenshots or Videos

Additional context

No response

[nealus]

Hi Alex, the problem is that tabsets are created and destroyed as tabs are moved, and when using enableSingleTabStretch with a single tab you are moving the tab not the tabset.

I cannot see a simple solution to keep the headed color (class) of stretched tabs as you move them about.

So I've added an attribute to tabs, tabsetClassName, that will apply that class to the parent tabset when the tab is selected, I've also updated the demo apps mosaic layout to use this to apply colored headers.

This is not in npm yet, so you will have to try it from the source.

[nealus]

[axeldvera]

Hello, thanks for the quick response.

I downloaded the files that you modified (IJsonModel.ts, TabNode.ts and TabSet.tsx) and replaced them in their respective locations within the flexlayout module. Unfortunately, it's not working. The "tabsetClassName" property doesn't appear, not even as undefined.

Am I missing something? Hope you can help me. Best regards,

[nealus]

It will not work directly with the src, it needs the .js files in the lib dir.

Here's a zip of my lib dir, unzip this in the node_modules/flexlayout-react to replace the existing lib dir.

lib.zip

[axeldvera]

Okay. I just replaced the lib files in "node_modules/flexlayout-react" but it still doesn't work. I inspected it with the chrome plugin "React Developer Tools" and the attribute does not appear. I leave you a screenshot:

Thank you in advance!

[nealus]

ok maybe you need the dist dir then, try replacing these:

dist.zip

[axeldvera]

Fine, thanks.

I just replaced the files in the dist folder but, unfortunately, it still doesn't work. Any other idea?

I remain attentive to your response. Thanks again!

[nealus]

I don't understand why that didn't work, did you stop and 'yarn start' after the change?

Try downloading and building flexlayout (yarn, then yarn build), then replace the dependency in your package.json to point to your local copy of flexlayout, which will then contain the lib and dist dirs

[axeldvera]

I use NPM instead of yark. Should it work the same way?

[nealus]

I think for npm it will be: npm install then npm run build

If you are using vite then it may be caching the npm modules

[axeldvera]

Indeed, the problem was the vite cache. This was the step I needed to take. Thanks so much for the help.

Is there an estimated time for this change to be in NPM? In the meantime I'm going to have to upload the modified module to my repo and it's not ideal.

[nealus]

probably at the weekend, I may change it to only apply the tabsetClassName if the tab is stretched (a single tab filling the tabset)

[axeldvera]

That change would be perfect. I'll wait for the NPM update then. Thank you very much again for the help. Greetings!