fix(useCSSTransition): fix fast state changing (#8890)

* fix(useCSSTransition): fix fast state changing

* fix(useCSSTransition): fix import

* fix: fix code review

* fix: add condition when duration <= 0

* fix: delete useStateWithPrev

* fix: add timer delay

* test: fix test

* test: add test

* fix: use useIsomorphicLayoutEffect instead of useEffect

* fix: use useIsomorphicLayoutEffect instead of useEffect

Author: EldarMuhamethanov

packages/vkui/src/lib/animation/useCSSTransition.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, renderHook } from '@testing-library/react';
+import { act, fireEvent, render, renderHook } from '@testing-library/react';
 import { useCSSTransition } from './useCSSTransition';
 
 describe(useCSSTransition, () => {
@@ -415,4 +415,100 @@ describe(useCSSTransition, () => {
       },
     );
   });
+
+  it('should not stuck in exiting when transitionend not fired (fast open -> close)', () => {
+    // Управляем таймерами вручную
+    jest.useFakeTimers();
+
+    // Мокаем getComputedStyle, чтобы хук поставил fallback-таймер (200ms + 0ms)
+    const getComputedStyleMock = jest.spyOn(window, 'getComputedStyle').mockImplementation(
+      () =>
+        ({
+          transitionDuration: '0.2s',
+          transitionDelay: '0s',
+        }) as unknown as CSSStyleDeclaration,
+    );
+
+    const { result, rerender } = renderHook(
+      (inProp) => useCSSTransition<HTMLDivElement>(inProp, { ...callbacks }),
+      { initialProps: false },
+    );
+
+    const cmp = render(<div {...result.current[1]} />);
+
+    // initial
+    expect(result.current[0]).toBe('exited');
+
+    // open -> entering
+    rerender(true);
+    cmp.rerender(<div {...result.current[1]} />);
+    expect(result.current[0]).toBe('entering');
+
+    // очень быстро close -> переход в exiting (но transitionend НЕ придёт)
+    rerender(false);
+    cmp.rerender(<div {...result.current[1]} />);
+    expect(result.current[0]).toBe('exiting');
+
+    // колбэки, которые должны были сработать к этому моменту
+    expect(callbacks.onEnter).toHaveBeenCalledTimes(1);
+    expect(callbacks.onEntering).toHaveBeenCalledTimes(1);
+    expect(callbacks.onExiting).toHaveBeenCalledTimes(1);
+    expect(callbacks.onExited).toHaveBeenCalledTimes(0);
+
+    // Прокручиваем таймеры дальше, чтобы сработал fallback (200ms + safety offset (≈50ms))
+    act(() => {
+      jest.advanceTimersByTime(300);
+    });
+
+    // После fallback хук должен перевести состояние в exited и вызвать onExited
+    expect(result.current[0]).toBe('exited');
+    expect(callbacks.onExited).toHaveBeenCalledTimes(1);
+
+    // Восстанавливаем мок
+    getComputedStyleMock.mockRestore();
+    jest.useRealTimers();
+  });
+
+  it('should not stuck in exiting when transitionend not fired (transition duration < 0 )', () => {
+    // Управляем таймерами вручную
+    jest.useFakeTimers();
+
+    // Мокаем getComputedStyle, чтобы хук поставил fallback-таймер (200ms + 0ms)
+    const getComputedStyleMock = jest.spyOn(window, 'getComputedStyle').mockImplementation(
+      () =>
+        ({
+          transitionDuration: '0s',
+          transitionDelay: '0s',
+        }) as unknown as CSSStyleDeclaration,
+    );
+
+    const { result, rerender } = renderHook(
+      (inProp) => useCSSTransition<HTMLDivElement>(inProp, { ...callbacks }),
+      { initialProps: false },
+    );
+
+    const cmp = render(<div {...result.current[1]} />);
+
+    // initial
+    expect(result.current[0]).toBe('exited');
+
+    // open -> entering
+    rerender(true);
+    cmp.rerender(<div {...result.current[1]} />);
+    expect(result.current[0]).toBe('entered');
+
+    rerender(false);
+    cmp.rerender(<div {...result.current[1]} />);
+    expect(result.current[0]).toBe('exited');
+
+    // колбэки, которые должны были сработать к этому моменту
+    expect(callbacks.onEnter).toHaveBeenCalledTimes(1);
+    expect(callbacks.onEntering).toHaveBeenCalledTimes(1);
+    expect(callbacks.onExiting).toHaveBeenCalledTimes(1);
+    expect(callbacks.onExited).toHaveBeenCalledTimes(1);
+
+    // Восстанавливаем мок
+    getComputedStyleMock.mockRestore();
+    jest.useRealTimers();
+  });
 });

packages/vkui/src/lib/animation/useCSSTransition.ts

@@ -1,7 +1,8 @@
-import { type TransitionEvent, type TransitionEventHandler, useEffect, useRef } from 'react';
+import { type TransitionEvent, type TransitionEventHandler, useRef, useState } from 'react';
 import { noop } from '@vkontakte/vkjs';
 import { useStableCallback } from '../../hooks/useStableCallback';
-import { useStateWithPrev } from '../../hooks/useStateWithPrev';
+import { millisecondsInSecond } from '../date';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';
 
 /* istanbul ignore next: особенность рендера в браузере когда меняется className, в Jest не воспроизвести */
 const forceReflowForFixNewMountedElement = (node: Element | null) => void node?.scrollTop;
@@ -37,6 +38,8 @@ export type UseCSSTransition<Ref extends Element = Element> = [
   },
 ];
 
+const TRANSITION_FALLBACK_DELAY = 100;
+
 /**
  * Хук основан на компоненте `CSSTransition` из библиотеки `react-transition-group`.
  *
@@ -64,9 +67,10 @@ export const useCSSTransition = <Ref extends Element = Element>(
   const onExit = useStableCallback(onExitProp || noop);
   const onExiting = useStableCallback(onExitingProp || noop);
   const onExited = useStableCallback(onExitedProp || noop);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const ref = useRef<Ref | null>(null);
-  const [[state, prevState], setState] = useStateWithPrev<UseCSSTransitionState>(() => {
+  const [state, setState] = useState<UseCSSTransitionState>(() => {
     if (!inProp) {
       return 'exited';
     }
@@ -79,7 +83,14 @@ export const useCSSTransition = <Ref extends Element = Element>(
     return 'entered';
   });
 
-  useEffect(
+  const clearTimer = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  };
+
+  useIsomorphicLayoutEffect(
     function updateState() {
       if (inProp) {
         switch (state) {
@@ -150,9 +161,6 @@ export const useCSSTransition = <Ref extends Element = Element>(
       inProp,
 
       state,
-      prevState,
-      setState,
-
       enableAppear,
       enableEnter,
       onEnter,
@@ -166,35 +174,66 @@ export const useCSSTransition = <Ref extends Element = Element>(
     ],
   );
 
-  const onTransitionEnd = (event: TransitionEvent) => {
-    /* istanbul ignore if: на всякий случай предупреждаем всплытие, нет смысла проверять условие */
-    if (event.target !== ref.current) {
-      return;
-    }
+  const completeTransition = useStableCallback((event?: TransitionEvent) => {
+    clearTimer();
 
     switch (state) {
       case 'appearing':
         setState('appeared');
-        onEntered(event.propertyName, true);
+        onEntered(event?.propertyName, true);
         break;
       case 'entering':
         setState('entered');
-        onEntered(event.propertyName);
+        onEntered(event?.propertyName);
         break;
       case 'exiting':
         setState('exited');
-        onExited(event.propertyName);
+        onExited(event?.propertyName);
         break;
     }
-  };
+  });
+
+  useIsomorphicLayoutEffect(
+    function scheduleTransitionCompletionFallback() {
+      const el = ref.current;
+      if (!el) {
+        return;
+      }
+
+      if (state === 'appearing' || state === 'entering' || state === 'exiting') {
+        const style = getComputedStyle(el);
+
+        const parseTime = (s: string) =>
+          s.includes('ms') ? parseFloat(s) : parseFloat(s) * millisecondsInSecond;
+
+        const duration =
+          Math.max(...style.transitionDuration.split(',').map(parseTime)) +
+          Math.max(...style.transitionDelay.split(',').map(parseTime));
+
+        if (duration <= 0) {
+          completeTransition();
+          return;
+        }
+
+        // fallback если onTransitionEnd не пришёл
+        // TRANSITION_FALLBACK_DELAY, чтобы минимизировать вероятность,
+        // что setTimeout сработает раньше onTransitionEnd
+        timerRef.current = setTimeout(completeTransition, duration + TRANSITION_FALLBACK_DELAY);
+
+        return clearTimer;
+      }
+      return;
+    },
+    [completeTransition, state],
+  );
 
   return [
     state,
     {
       ref,
       onTransitionEnd:
         state !== 'appeared' && state !== 'entered' && state !== 'exited'
-          ? onTransitionEnd
+          ? completeTransition
           : undefined,
     },
   ];