SohoTabsComponent: Odd behaviour with the "overflow dropdown"

[madebyannalam]

Describe the bug The following issues have been observed when one has enough tabs in a SohoTabsComponent to trigger the "overflow dropdown":

• When you select a tab via the dropdown, the tabs' widths appear to be fixed around the 120px mark. (Screenshots 1 & 2) This is a problem because, when a tab is initially wider than 120px (as is the case with the Hierarchy Management tab from screenshots 3 & 4), it makes it look like it's overlapping its neighbours.
• Also, when you select a tab via the dropdown, the component doesn't activate the selected tab. (In screenshots 1 & 2, I was attempting to jump from the Tasks tab to the People tab)

To Reproduce Steps to reproduce the behavior:

1. Have a SohoTabsComponent with around 7-8 tabs.
2. Minimise the browser window to a size where the "overflow dropdown" will appear.
3. Select any tab from that dropdown.
4. Take note of the change in tab width and the tab component not activating the selected tab.

Expected behavior

• The tabs' widths should stay at their original widths prior to interacting with the "overflow dropdown". I.e. if a tab was initially 160px wide prior, it should stay at 160px once I start clicking on options in the dropdown.
• When I select an option from the "overflow dropdown", I expect the relevant tab panel to be displayed. Using the example from screenshots 1 & 2, I should be taken to the People tab when I select it from the dropdown.

Version

• ids-enterprise-ng: 17.6.2

Screenshots

Platform

• Device (if applicable) : N/A
• OS Version: Windows Windows 11 Enterprise
• Browser Name: Google Chrome
• Browser Version: Version 126.0.6478.127 (Official Build) (64-bit)

Additional context N/A

[tmcconechy]

@madebyannalam would it be possible to add an example to make this more clear https://stackblitz.com/edit/ids-quick-start-1781?file=src%2Fapp%2Fapp.component.ts

One thing that might help is you can now set the tab width (in newer versions i think 17.6.2 but possibly a little newer) explore equalWidth and or maxWidth

https://github.com/infor-design/enterprise/blob/main/src/components/tabs/tabs.js#L67-L71

[tmcconechy]

also i think a bug was fixed where the tab is not activated. On the latest version try this:

1. go to https://main-enterprise.demo.design.infor.com/components/tabs/example-index.html
2. resize the page so an overflow occurs
3. open the menu and pick the last tab

Is that the bug your ultimately describing? if so might just need an update

[madebyannalam]

also i think a bug was fixed where the tab is not activated. On the latest version try this:

1. go to https://main-enterprise.demo.design.infor.com/components/tabs/example-index.html
2. resize the page so an overflow occurs
3. open the menu and pick the last tab

Is that the bug your ultimately describing? if so might just need an update

That was one of the issues. I'll send word to MRM's Business Analysts check it next time we update our Soho version.

[madebyannalam]

@madebyannalam would it be possible to add an example to make this more clear https://stackblitz.com/edit/ids-quick-start-1781?file=src%2Fapp%2Fapp.component.ts

One thing that might help is you can now set the tab width (in newer versions i think 17.6.2 but possibly a little newer) explore equalWidth and or maxWidth

https://github.com/infor-design/enterprise/blob/main/src/components/tabs/tabs.js#L67-L71

I haven't been able to reproduce my other issue with the supplied stackblitz. While the equalWidth setting does sound like it will tick most of our boxes, I can't access it in MRM's current implementation of SoHo (we're on version 17.6.2 of ids-enterprise-ng).