Tabs: Unable to programmatically change tabs

[tdanh2k]

First of all, thank you for an amazing product. Been using it for weeks now without any issues. May I request that Tabs component exposes its state or any thing of sort so that tabs can be programmatically switched? Cause right now what I'm doing is this:

<Tabs key={`${openTab}-tab`} value={openTab}>

which re-renders the entire Tabs component when openTab is changed. Thank you in advance.

[vuphan0804]

That's my problem

[hassaanmasood]

Facing same issue.

[luisanton-io]

This would indeed be very helpful. To give context about my use case, Tabs are actually links to different sections. Therefore when users browse back for example using the back button, I would expect the tab indicator to move accordingly to the tab representing the current pathname.

[johnramesh]

Its worked for me. after setting the active Tab

Initialize activeTab const [activeTab, setActiveTab] = React.useState("contact");

useEffect(() => { const tabButton:any = document.querySelector(li[data-value=${activeTab}]); if (tabButton) { tabButton.click(); } }, [activeTab]);

Where ever you want to change the Tab, call setActiveTab with your tabname

[luisanton-io]

This would indeed be very helpful. To give context about my use case, Tabs are actually links to different sections. Therefore when users browse back for example using the back button, I would expect the tab indicator to move accordingly to the tab representing the current pathname.

Came back to share what I got just to realize it is very similar to @johnramesh solution - that was a good call! While it def feels like a hack, this is what I eventually ended up with for my specific use-case:

const pathname = usePathname()

useEffect(() => {
    document.querySelector(`ul[role="tablist"] li[href="${pathname}"]`)?.click()
}, [pathname])

[yuuhn]

I would also appreciate this feature!

In my use case, the first tab is the default, but if it's a mobile device, I need to disable it and switch to the second one.