@@ -74,6 +74,19 @@ const Tabs = forwardRef(function Tabs<T extends object>(
7474 [ variant ] ,
7575 ) ;
7676
77+ const withAnimationReset = useCallback (
78+ ( callback : ( ) => void ) => {
79+ if ( variant !== previousVariant . current || isVertical !== previousIsVertical . current ) {
80+ cursorRef . current ?. removeAttribute ( "data-initialized" ) ;
81+ }
82+ callback ( ) ;
83+ previousVariant . current = variant ;
84+ previousIsVertical . current = isVertical ;
85+ requestAnimationFrame ( ( ) => cursorRef . current ?. setAttribute ( "data-initialized" , "true" ) ) ;
86+ } ,
87+ [ isVertical , variant ] ,
88+ ) ;
89+
7790 const updateCursorPosition = useCallback (
7891 ( selectedTab : HTMLElement ) => {
7992 if ( ! cursorRef . current ) return ;
@@ -87,19 +100,14 @@ const Tabs = forwardRef(function Tabs<T extends object>(
87100
88101 const styles = getCursorStyles ( tabRect ) ;
89102
90- if ( variant !== previousVariant . current || isVertical !== previousIsVertical . current ) {
91- cursorRef . current . removeAttribute ( "data-initialized" ) ;
92- }
93- cursorRef . current . style . left = styles . left ;
94- cursorRef . current . style . top = styles . top ;
95- cursorRef . current . style . width = styles . width ;
96- cursorRef . current . style . height = styles . height ;
97- previousVariant . current = variant ;
98- previousIsVertical . current = isVertical ;
99-
100- requestAnimationFrame ( ( ) => cursorRef . current ?. setAttribute ( "data-initialized" , "true" ) ) ;
103+ withAnimationReset ( ( ) => {
104+ cursorRef . current ! . style . left = styles . left ;
105+ cursorRef . current ! . style . top = styles . top ;
106+ cursorRef . current ! . style . width = styles . width ;
107+ cursorRef . current ! . style . height = styles . height ;
108+ } ) ;
101109 } ,
102- [ cursorRef . current , getCursorStyles , isVertical , variant ] ,
110+ [ cursorRef . current , getCursorStyles , withAnimationReset ] ,
103111 ) ;
104112
105113 const onResize = useCallback (
0 commit comments