[Tabs] Tab group content not re-rendered, causing some issues with badge rendering

[amandac628]

Prerequisites

• I have searched for duplicate or closed issues
• I have read the contributing guidelines

Describe the issue

When using another component within the tabpanel, I have observed that the tabpanel did not re-render and it caused issues for truncated badge.

How to replicate:

1. Create a layout with sidebar with multiple pages
2. On first page, use tab group, tab and tabpanel to create tabs
3. Within the tab, add a badge with a long text
4. When on load, the badge will render correctly. However, when we navigate and come back to the same page, the badge is not properly truncated.

Work-around:

1. I added "Active" state on my tabpanel to force the re-render to happen.
2. No active state was added to the tab, only to tab panel.

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome

Describe your frontend stack. What version of React and @govtechsg/sgds-web-component are you using? CSR or SSR?

CSR, 3.15.0