fix(input): animation race condition

Trendyol · Mar 25, 2024 · 23c832a · 23c832a
1 parent 330dff7
commit 23c832a
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 84 deletions.
diff --git a/src/components/Input/Input.test.tsx b/src/components/Input/Input.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { act } from 'react-test-renderer';
-import { fireEvent, render } from '../../test-utils';
+import { fireEvent, render, waitFor } from '../../test-utils';
 import theme from '../../theme';
 import Input, { TextInputHandles } from './Input';
 
@@ -115,7 +115,7 @@ describe('Input', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
-  test('should focus input correctly', () => {
+  test('should focus input correctly', async () => {
     // when
     const { getByTestId } = render(<Input label="label" />);
 
@@ -125,14 +125,14 @@ describe('Input', () => {
     );
 
     // when
-    act(() => {
-      fireEvent(getByTestId('input'), 'onFocus');
-    });
+    fireEvent(getByTestId('input'), 'onFocus');
 
     // then
-    expect(getByTestId('input-box').props.style[0].borderColor).toBe(
-      theme.colors.primaryKey,
-    );
+    await waitFor(() => {
+      expect(getByTestId('input-box').props.style[0].borderColor).toBe(
+        theme.colors.primaryKey,
+      );
+    });
   });
 
   test('should not focus and blur input when input is disabled', () => {

diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
@@ -175,11 +175,13 @@ const Input = forwardRef<TextInputHandles, InputProps>(
       }
     }, [error, success, icon]);
 
-    const handleFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    const handleFocus = async (
+      e: NativeSyntheticEvent<TextInputFocusEventData>,
+    ) => {
       if (disabled || !editable) {
         return;
       }
-      startAnimation();
+      await startAnimation();
 
       setFocused(true);
       setVariantIconName(null);
@@ -189,13 +191,15 @@ const Input = forwardRef<TextInputHandles, InputProps>(
       rest.onFocus?.(e);
     };
 
-    const handleBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    const handleBlur = async (
+      e: NativeSyntheticEvent<TextInputFocusEventData>,
+    ) => {
       if (disabled || !editable) {
         return;
       }
 
       if (!value) {
-        stopAnimation();
+        await stopAnimation();
       }
 
       setFocused(false);

diff --git a/src/components/Input/hooks.ts b/src/components/Input/hooks.ts
@@ -117,39 +117,43 @@ export const useOutlineLabelVisibility = ({
   ).current;
 
   /* istanbul ignore next */
-  const startAnimation = () => {
-    Animated.parallel([
-      Animated.timing(labelPositionRef, {
-        toValue: labelPositionFillValue,
-        ...commonAnimatedProps,
-      }),
-      Animated.timing(fontSizeRef, {
-        toValue: labelFontSize - 2,
-        ...commonAnimatedProps,
-      }),
-      Animated.timing(lineHeightRef, {
-        toValue: labelLineHeightValue - 2,
-        ...commonAnimatedProps,
-      }),
-    ]).start();
+  const startAnimation = async () => {
+    return new Promise(res => {
+      Animated.parallel([
+        Animated.timing(labelPositionRef, {
+          toValue: labelPositionFillValue,
+          ...commonAnimatedProps,
+        }),
+        Animated.timing(fontSizeRef, {
+          toValue: labelFontSize - 2,
+          ...commonAnimatedProps,
+        }),
+        Animated.timing(lineHeightRef, {
+          toValue: labelLineHeightValue - 2,
+          ...commonAnimatedProps,
+        }),
+      ]).start(res);
+    });
   };
 
   /* istanbul ignore next */
-  const stopAnimation = () => {
-    Animated.parallel([
-      Animated.timing(labelPositionRef, {
-        toValue: labelPositionEmptyValue,
-        ...commonAnimatedProps,
-      }),
-      Animated.timing(fontSizeRef, {
-        toValue: labelFontSize,
-        ...commonAnimatedProps,
-      }),
-      Animated.timing(lineHeightRef, {
-        toValue: labelLineHeightValue,
-        ...commonAnimatedProps,
-      }),
-    ]).start();
+  const stopAnimation = async () => {
+    return new Promise(res => {
+      Animated.parallel([
+        Animated.timing(labelPositionRef, {
+          toValue: labelPositionEmptyValue,
+          ...commonAnimatedProps,
+        }),
+        Animated.timing(fontSizeRef, {
+          toValue: labelFontSize,
+          ...commonAnimatedProps,
+        }),
+        Animated.timing(lineHeightRef, {
+          toValue: labelLineHeightValue,
+          ...commonAnimatedProps,
+        }),
+      ]).start(res);
+    });
   };
 
   let viewHeight = inputHeight + 6;

diff --git a/src/components/TextArea/TextArea.test.tsx b/src/components/TextArea/TextArea.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { act } from 'react-test-renderer';
-import { fireEvent, render } from '../../test-utils';
+import { fireEvent, render, waitFor } from '../../test-utils';
 import theme from '../../theme';
 import TextArea, { TextInputHandles } from './TextArea';
 
@@ -81,7 +81,7 @@ describe('TextArea', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
-  test('should focus TextArea correctly', () => {
+  test('should focus TextArea correctly', async () => {
     // when
     const { getByTestId } = render(<TextArea label="label" />);
 
@@ -91,14 +91,14 @@ describe('TextArea', () => {
     );
 
     // when
-    act(() => {
-      fireEvent(getByTestId('textArea'), 'onFocus');
-    });
+    fireEvent(getByTestId('textArea'), 'onFocus');
 
     // then
-    expect(getByTestId('textArea-box').props.style[0].borderColor).toBe(
-      theme.colors.primaryKey,
-    );
+    await waitFor(() => {
+      expect(getByTestId('textArea-box').props.style[0].borderColor).toBe(
+        theme.colors.primaryKey,
+      );
+    });
   });
 
   test('should not focus and blur TextArea when TextArea is disabled', () => {

diff --git a/src/components/TextArea/TextArea.tsx b/src/components/TextArea/TextArea.tsx
@@ -135,25 +135,29 @@ const TextArea = forwardRef<TextInputHandles, TextAreaProps>(
       setErrorState(error);
     }, [error]);
 
-    const handleFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    const handleFocus = async (
+      e: NativeSyntheticEvent<TextInputFocusEventData>,
+    ) => {
       if (disabled || !editable) {
         return;
       }
-      startAnimation();
+      await startAnimation();
 
       setFocused(true);
       setErrorState(false);
 
       rest.onFocus?.(e);
     };
 
-    const handleBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    const handleBlur = async (
+      e: NativeSyntheticEvent<TextInputFocusEventData>,
+    ) => {
       if (disabled || !editable) {
         return;
       }
 
       if (!value) {
-        stopAnimation();
+        await stopAnimation();
       }
 
       setFocused(false);

diff --git a/src/components/TextArea/hooks.ts b/src/components/TextArea/hooks.ts
@@ -90,39 +90,43 @@ export const useOutlineLabelVisibility = ({
   ).current;
 
   /* istanbul ignore next */
-  const startAnimation = () => {
-    Animated.parallel([
-      Animated.timing(labelPositionRef, {
-        toValue: labelPositionFillValue,
-        ...commonAnimatedProps,
-      }),
-      Animated.timing(fontSizeRef, {
-        toValue: labelFontSize - 2,
-        ...commonAnimatedProps,
-      }),
-      Animated.timing(lineHeightRef, {
-        toValue: labelLineHeightValue - 2,
-        ...commonAnimatedProps,
-      }),
-    ]).start();
+  const startAnimation = async () => {
+    return new Promise(res => {
+      Animated.parallel([
+        Animated.timing(labelPositionRef, {
+          toValue: labelPositionFillValue,
+          ...commonAnimatedProps,
+        }),
+        Animated.timing(fontSizeRef, {
+          toValue: labelFontSize - 2,
+          ...commonAnimatedProps,
+        }),
+        Animated.timing(lineHeightRef, {
+          toValue: labelLineHeightValue - 2,
+          ...commonAnimatedProps,
+        }),
+      ]).start(res);
+    });
   };
 
   /* istanbul ignore next */
-  const stopAnimation = () => {
-    Animated.parallel([
-      Animated.timing(labelPositionRef, {
-        toValue: labelPositionEmptyValue,
-        ...commonAnimatedProps,
-      }),
-      Animated.timing(fontSizeRef, {
-        toValue: labelFontSize,
-        ...commonAnimatedProps,
-      }),
-      Animated.timing(lineHeightRef, {
-        toValue: labelLineHeightValue,
-        ...commonAnimatedProps,
-      }),
-    ]).start();
+  const stopAnimation = async () => {
+    return new Promise(res => {
+      Animated.parallel([
+        Animated.timing(labelPositionRef, {
+          toValue: labelPositionEmptyValue,
+          ...commonAnimatedProps,
+        }),
+        Animated.timing(fontSizeRef, {
+          toValue: labelFontSize,
+          ...commonAnimatedProps,
+        }),
+        Animated.timing(lineHeightRef, {
+          toValue: labelLineHeightValue,
+          ...commonAnimatedProps,
+        }),
+      ]).start(res);
+    });
   };
 
   let viewHeight = textAreaHeight + 6;