CustomTabs value prop (or state).... Unable to automatically change the tabs

[MrLuis]

Version

1.8.0

Reproduction link

https://jsfiddle.net/vu4cfqgo/

Operating System

MacOS

Device

MacPro

Browser & Version

Chrome 79? or 80

Steps to reproduce

1. When using the regular MaterialUI tabs, I can use the 'value' to change to any specific tab. However, when switching to CustomTabs, I can't. I believe that is because it has its own internal value state. But not sure how to overcome this.

What is expected?

When changing the 'value', it should change the selected tab.

What is actually happening?

Nothing...

---

Solution

I'm not sure if there is a way to link 'value' and re-trigger the change request or to use a different stage/prop name (like ActiveTab, or something like that).

Additional comments

I couldn't make a sample, because I don't know how to include material there.

[einazare]

Hello there, @MrLuis ,

Thank you for your interest in working with our products.
As you can see in our live docs page about this component: https://demos.creative-tim.com/material-dashboard-pro-react/#/documentation/tabs
We do not offer the same functionality as Material-UI, and I think nor we will add it inside our product, and that is why what you are asking for is not working. Our customers are more than welcomed to add their own code and modify our components, they are templates since they can be changed based on your own needs.
To add your custom select code, please go inside src/components/CustomTabs/CustomTabs.js file, and at lines 21-24 you will see our code for the Tab selection, you should add your code there.
Also, at line 36, you can see how we set the active Tab as well.

I will leave this issue opened with the tag enhancement and will check with the Creative Tim board to see if we should add a default active tab property (i.e. line 21), and a custom selection function (i.e., stop triggering our own function (line 37) and trigger a function that comes as a property.

Best,
Manu