Tab Overflow Menu

[richiethie]

I am currently looking for some help with a feature I am trying to build. What I have been building is an overflow menu for Twilio Paste Tabs. When the screen is resized, Tabs either be visible or "moved" to the overflow menu based on how much space is available.

I have been successful in the primary implementation so far, but I have run into one tricky issue. The current solution I have is for displayed Tabs to be placed into a visibleTabs state and the Tabs that cannot be displayed will be held in the overflowTabs state. The overflowTabs are currently Tabs with a display of "none".

The problem I run into is the following.

I will try and use an easy-to-follow example. Upon page load, I have 7 Tabs. 4 Tabs are visible and 3 Tabs belong to overflowTabs. When I resize my screen so that there are now 5 Tabs visible and 2 Tabs in overflowTabs, Tab number 5 cannot be clicked on to bring up its associated TabPanel. My discovery is that upon a change like this happening, the baseId of Tab number 5 is regenerated again. So initially if each Tab has a baseId of 1 - 7, after this change is made moving Tab 5 from overflowTabs to visibleTabs, Tab 5 is then assigned a baseId of 8. When I then try and click on Tab 5, no TabPanel will populate.

Let me know if there is anything I can help elaborate upon more, but would really appreciate any help from anyone. I am hoping that maybe there is some way to control how baseId is generated between each Tab.

[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:

• What is the best way to use Tabs in a container that is too small and causes overflow (updated: 11/08/2023, similarity score: 85%)
• Responsive tabs and accessible alternatives (updated: 11/15/2024, similarity score: 83%)
• What is the best way to use Tabs in a container that is too small and causes overflow - Answer (updated: 11/08/2023, similarity score: 83%)

[dosubot[bot]]

Hey @richiethie! I'm here to help you out with any coding bugs, questions, or contributions you might have. Let's tackle this issue together!

The issue you're encountering with the baseId being regenerated when a Tab moves between visibleTabs and overflowTabs can be addressed by ensuring that the baseId remains consistent across these state changes.

In the Paste design system, the useUID hook is typically used to generate unique IDs, but it can lead to new IDs being generated if the component is re-rendered or its state changes significantly. To maintain consistent IDs, you can use the useUIDSeed hook instead. This hook allows you to generate consistent IDs by using a seed value, ensuring that the same input always results in the same output.

Here's a potential approach to solve your problem:

1. Use useUIDSeed to generate a consistent baseId for each Tab. This way, even if a Tab moves between visibleTabs and overflowTabs, its baseId will remain the same.

2. Ensure that the seed value you provide to useUIDSeed is unique and consistent for each Tab. You might use a combination of a static identifier and the Tab's index or some other unique property.

Here's a simplified example:

const uidSeed = useUIDSeed();
const tabs = [
  { id: uidSeed('tab-1'), label: 'Tab 1' },
  { id: uidSeed('tab-2'), label: 'Tab 2' },
  // ... other tabs
];

By using useUIDSeed with a consistent seed value, you can prevent the baseId from being regenerated when Tabs move between states, ensuring that the correct TabPanel is displayed when a Tab is clicked.

To continue talking to Dosu, mention @dosu.

---

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