Default Tab Selection

[richiethie]

I am currently looking for a way to disable the default Tab selection from Twilio Paste. The current scenario I have is when I have a Tab selected and it becomes unavailable, it automatically reverts the selected Tab to the most recently selected Tab prior to the current. Is there any way that I can disable this functionality? I can try and provide more context if necessary but would appreciate any help with this.

Thank you!

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Tab Overflow Menu (updated: 02/05/2025, similarity score: 83%)
• Tabs component cannot have children? - Answer (updated: 06/14/2022, similarity score: 82%)
• Any example/support for onclick for tab (updated: 03/08/2021, similarity score: 82%)

[dosubot[bot]]

You can programmatically set the selected tab to null or undefined to prevent automatic selection of a previous tab when the current tab becomes unavailable. The useTabPrimitiveState hook provides a select function that allows you to set the selected tab's id. By calling this function with null, you can effectively deselect any currently selected tab, preventing the default behavior of reverting to a previously selected tab.

Here's an example:

import {
  useTabPrimitiveState,
  TabPrimitiveList,
  TabPrimitive,
  TabPrimitivePanel,
} from '@twilio-paste/core/tabs-primitive';

const Example = () => {
  const tab = useTabPrimitiveState();

  // Function to deselect the current tab
  const deselectTab = () => {
    tab.select(null);
  };

  return (
    <>
      <TabPrimitiveList {...tab} aria-label="My tabs">
        <TabPrimitive {...tab}>Tab 1</TabPrimitive>
        <TabPrimitive {...tab}>Tab 2</TabPrimitive>
        <TabPrimitive {...tab}>Tab 3</TabPrimitive>
      </TabPrimitiveList>
      <TabPrimitivePanel {...tab}>Tab 1 Content</TabPrimitivePanel>
      <TabPrimitivePanel {...tab}>Tab 2 Content</TabPrimitivePanel>
      <TabPrimitivePanel {...tab}>Tab 3 Content</TabPrimitivePanel>
      <button onClick={deselectTab}>Deselect Tab</button>
    </>
  );
};

This code uses the select function from the useTabPrimitiveState hook to set the selected tab to null, effectively deselecting any currently selected tab ^[1][2].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[dosubot[bot]]

To prevent the automatic selection of a new tab when the current tab becomes unavailable, you can use the onSelect callback provided by the Tabs component to intercept and customize the tab selection behavior. By using this callback, you can control which tab should be selected or prevent any selection when a tab becomes unavailable.

Here's an example of how you might implement this:

import {
  Tabs,
  TabList,
  Tab,
  TabPanels,
  TabPanel,
  useTabState,
} from '@twilio-paste/core';

const MyTabsComponent = () => {
  const tab = useTabState();

  // Custom onSelect handler
  const handleSelect = (event) => {
    const selectedTabId = event.target.id;
    // Add logic here to determine if the tab should be selected
    // For example, prevent selection if the tab is unavailable
    if (/* condition to check if tab is unavailable */) {
      event.preventDefault();
    } else {
      tab.select(selectedTabId);
    }
  };

  return (
    <Tabs state={tab} onSelect={handleSelect}>
      <TabList aria-label="My tabs">
        <Tab id="tab1">Tab 1</Tab>
        <Tab id="tab2">Tab 2</Tab>
        <Tab id="tab3">Tab 3</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>
          <p>Content for Tab 1</p>
        </TabPanel>
        <TabPanel>
          <p>Content for Tab 2</p>
        </TabPanel>
        <TabPanel>
          <p>Content for Tab 3</p>
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
};

In this example, the handleSelect function is used to determine whether a tab should be selected based on your custom logic. You can modify the condition to fit your specific requirements for when a tab is considered unavailable.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[richiethie]

@dosu It looks like the Tabs component from @twilio-paste/core doesn't directly accept the onSelect prop.

[dosubot[bot]]

The Tabs component from @twilio-paste/core does not directly accept an onSelect prop. To customize tab selection behavior, you can use the manual prop along with the useTabState hook to manage the tab selection manually. Here's how you can implement this:

import {
  Tabs,
  TabList,
  Tab,
  TabPanels,
  TabPanel,
  useTabState,
} from '@twilio-paste/core';

const MyTabsComponent = () => {
  const tab = useTabState({ manual: true });

  // Custom logic to handle tab selection
  const handleTabSelect = (selectedId) => {
    // Add your logic here to determine if the tab should be selected
    if (/* condition to check if tab is unavailable */) {
      // Prevent selection or handle unavailable tab
    } else {
      tab.select(selectedId);
    }
  };

  return (
    <Tabs state={tab}>
      <TabList aria-label="My tabs">
        <Tab id="tab1" onClick={() => handleTabSelect('tab1')}>Tab 1</Tab>
        <Tab id="tab2" onClick={() => handleTabSelect('tab2')}>Tab 2</Tab>
        <Tab id="tab3" onClick={() => handleTabSelect('tab3')}>Tab 3</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>
          <p>Content for Tab 1</p>
        </TabPanel>
        <TabPanel>
          <p>Content for Tab 2</p>
        </TabPanel>
        <TabPanel>
          <p>Content for Tab 3</p>
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
};

In this example, the handleTabSelect function is used to determine whether a tab should be selected based on your custom logic. You can modify the condition to fit your specific requirements for when a tab is considered unavailable.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[richiethie]

@dosu This looks like it would apply to a scenario where I would be clicking on a Tab. In my situation, I am not doing a click operation when the currently selected Tab becomes unavailable so I am not sure that this solution will work. I need to prevent the default behavior of a previous Tab being auto selected when the current Tab becomes unavailable at all times and not just when a click operation happens.

[dosubot[bot]]

To prevent the automatic selection of a previous tab when the current tab becomes unavailable, you can manage the tab state manually using the useTabPrimitiveState hook. This approach allows you to control the tab selection logic without relying on user interactions like clicks.

Here's an example of how you can implement this:

import {
  useTabPrimitiveState,
  TabPrimitiveList,
  TabPrimitive,
  TabPrimitivePanel,
} from '@twilio-paste/core/tabs-primitive';

const MyTabsComponent = () => {
  const tab = useTabPrimitiveState();

  // Function to handle tab availability changes
  const handleTabAvailabilityChange = (unavailableTabId) => {
    if (tab.selectedId === unavailableTabId) {
      // Deselect the current tab if it becomes unavailable
      tab.select(null);
    }
  };

  // Example: Simulate a tab becoming unavailable
  // You can call this function based on your specific logic
  handleTabAvailabilityChange('tab2');

  return (
    <>
      <TabPrimitiveList {...tab} aria-label="My tabs">
        <TabPrimitive {...tab} id="tab1">Tab 1</TabPrimitive>
        <TabPrimitive {...tab} id="tab2">Tab 2</TabPrimitive>
        <TabPrimitive {...tab} id="tab3">Tab 3</TabPrimitive>
      </TabPrimitiveList>
      <TabPrimitivePanel {...tab} id="tab1">Content for Tab 1</TabPrimitivePanel>
      <TabPrimitivePanel {...tab} id="tab2">Content for Tab 2</TabPrimitivePanel>
      <TabPrimitivePanel {...tab} id="tab3">Content for Tab 3</TabPrimitivePanel>
    </>
  );
};

In this example, the handleTabAvailabilityChange function is used to deselect the current tab if it becomes unavailable. You can call this function whenever a tab's availability changes, ensuring that no tab is automatically selected when the current tab becomes unavailable.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[krisantrobus]

Hi @richiethie, Dosu was on the right track by using the state. We discourage using primitives though as they are unstyled. I have created a working CodeSandbox that when selecting the second tab and then using the disabled button allows you to select any tab you like. Just a note, an active tab is mandatory as a tab panel should always be displayed for the component.

The hook utilizes the baseId and "should" append the tab index so set the ids of the tabs. I put it in quotes because in this sandbox, for some reason it is adding 2 to the index.

Be sure to use the hook and set it on the component:

const { ...tabState } = useTabState({
    baseId: "hook-example",
  });

 <Tabs state={tabState}>

The you will be able to use the select function from the hook to programmatically select any tab you like:

<Button
            variant="primary"
            onClick={() => {
              // only update the selected tab if you are currently on the one that will be disabled
              if (tabState.selectedId === "hook-example-4") {
                tabState.select("hook-example-6");
              }
              setIsSuperNetworkDisabled(!isSuperNetworkDisabled);
            }}
          >
            Toggle Super Network Disabled
</Button>

Let us know if this is what you were looking for or you need further help.