Set selected tab in Tabs @ design-system 1.12.2

Discord Q&A frontend-questions
1

I’m building a custom page in a plugin and trying to set routing to Tabs/TabGroup using design-system v1.12.2*:

Can’t figure out how to programatically change selectedTabIndex. All I see is initialSelectedTabIndex, but that won’t change after first mount.

Am I missing something?

  • I’m using v1.12.4 because can’t/won’t upgrade Strapi since v4.14 due to custom patch-package tweaks that would break.

This topic has been created from a Discord post (1256136733913911316) to give it more visibility.
It will be on Read-Only mode here.
Join the conversation on Discord

2

FYI, I solved it by getting ref to TabGroup and use its internal _handlers.setSelectedTabIndex() method:

const tabGroupRef = React.useRef();

function setTabIndex(nextIndex) {
  // set tab by TabGroup's internal method, if available
   tabGroupRef.current?._handlers?.setSelectedTabIndex?.(nextIndex);
}

return (
  <TabGroup ref={tabGroupRef}>...</TabGroup>
);