ix icon indicating copy to clipboard operation
ix copied to clipboard

<ix-tabs> The tabs sliding window position is incorrect if tab selected by JS code

Open chencc1988 opened this issue 1 year ago • 2 comments

What happened?

When the tab list exceeds the width of the container, the sliding window of the tabs does not move to the selected tab position if the tab's selected state is controlled by javascript.

In the reproduction demo code, the tabs are force to lock to tab1. However if you click the tab5, the tabs position will stay on tabs 5 but not moves back to the tab1.

The real case is if the page is refreshing and the tab that needs to be displayed is the 5th tab (in my application this is determined by angular's routing parameter). The user will not be aware of that the 5th tab is selected. Instead, they think that no tab is selected

Animation

What type of frontend frameware are you seeing the problem on?

Angular

Which version of iX do you use?

v2.0.4

Code to produce this issue.

https://stackblitz.com/edit/1tqmdv?file=src%2Fapp%2Ftabs.ts

chencc1988 avatar Dec 20 '23 02:12 chencc1988

Internal ref [IX-866]

matthiashader avatar Feb 05 '24 13:02 matthiashader

+1 - Facing the same issue in Angular 17 with ix-angular 2.1.2. But in our case the component that is shown is the right one, but the Tabs are hiding behind arrows. The tabs slide too far right by the pixel of the margin to the left corner.

thiemodaubner avatar May 24 '24 06:05 thiemodaubner

Fixed via #1390

nuke-ellington avatar Sep 03 '24 09:09 nuke-ellington