VKCOM · EldarMuhamethanov · May 12, 2025 · May 12, 2025 · May 12, 2025 · May 12, 2025
@@ -41,6 +41,14 @@ export const SearchPlayground = (props: ComponentPlaygroundProps) => {
           onFindButtonClick: [noop],
           value: ['value'],
         },
+        {
+          placeholder: [
+            withLabel(
+              'Very very very very very very very very long placeholder',
+              'Long placeholder',
+            ),
+          ],
+        },
       ]}
     >
       {({ dir, ...props }: SearchProps) => (

@@ -118,8 +118,16 @@
   opacity: var(--vkui--opacity_disable_accessibility);
 }
 
+.nativeInput:placeholder-shown {
+  margin-inline-end: var(--vkui--spacing_size_xl);
+  text-overflow: ellipsis;
+}
+
 .nativeInput::placeholder {
+  overflow: hidden;
+  text-overflow: ellipsis;
   color: var(--vkui--color_text_secondary);
+  white-space: nowrap;
   /* Для Firefox */
   opacity: 1;
 }
@@ -134,29 +142,56 @@
   align-items: center;
   justify-content: center;
   color: var(--vkui--color_icon_secondary);
-  /* Используем translate3d, чтобы поправить дергание при наведении в Safari */
-  transform: translate3d(calc(var(--vkui_internal--search_shift_direction) * 100%), 0, 0);
-  transition: transform 0.3s var(--vkui--animation_easing_platform);
+  animation-duration: 0.3s;
+  animation-timing-function: var(--vkui--animation_easing_platform);
+  animation-fill-mode: both;
 
+  --vkui_internal--search_transform_offset: calc(
+    var(--vkui_internal--search_shift_direction) * 100%
+  );
   --vkui_internal--search_icon_size: calc(var(--vkui_internal--search_height) + 4px);
 }
 
+.controls.controlsStateEnter {
+  animation-name: animation-controls-slide-in;
+}
+
+.controls.controlsStateExit {
+  animation-name: animation-controls-slide-out;
+}
+
 .hasIcon .controls {
   /* Исключаем параметр icon из расчёта, чтобы он оставался видимым */
-  transform: translate3d(
-    calc(
-      var(--vkui_internal--search_shift_direction) *
-        calc(100% - var(--vkui_internal--search_icon_size))
-    ),
-    0,
-    0
+  --vkui_internal--search_transform_offset: calc(
+    var(--vkui_internal--search_shift_direction) *
+      calc(100% - var(--vkui_internal--search_icon_size))
   );
 }
 
 .hasValue .controls {
   transform: translate3d(0, 0, 0);
 }
 
+@keyframes animation-controls-slide-in {
+  /* Используем translate3d, чтобы поправить дергание при наведении в Safari */
+  from {
+    transform: translate3d(var(--vkui_internal--search_transform_offset), 0, 0);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes animation-controls-slide-out {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    transform: translate3d(var(--vkui_internal--search_transform_offset), 0, 0);
+  }
+}
+
 .icon {
   display: flex;
   align-items: center;

@@ -1,7 +1,12 @@
 import { act } from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { Icon24Done } from '@vkontakte/icons';
-import { baselineComponent, fakeTimers, userEvent } from '../../testing/utils';
+import {
+  baselineComponent,
+  fakeTimers,
+  userEvent,
+  waitCSSKeyframesAnimation,
+} from '../../testing/utils';
 import { Search } from './Search';
 import styles from './Search.module.css';
 
@@ -63,11 +68,12 @@ describe(Search, () => {
           <input data-testid="reset" type="reset" />
         </form>,
       );
-      expect(getClearIcon()).toHaveAttribute('tabindex', '-1');
+      expect(screen.queryByTestId('clear-button')).toBeNull();
       await userEvent.type(getInput(), 'user');
       expect(getClearIcon()).not.toHaveAttribute('tabindex');
       fireEvent.click(screen.getByTestId('reset'));
-      expect(getClearIcon()).toHaveAttribute('tabindex', '-1');
+      await waitCSSKeyframesAnimation(getClearIcon());
+      expect(screen.queryByTestId('clear-button')).toBeNull();
     });
     it('handles clear button visibility with default value correctly', async () => {
       render(
@@ -162,7 +168,7 @@ describe(Search, () => {
 
   it('calls onIconClick', async () => {
     const cb = jest.fn();
-    render(<Search icon={<div data-testid="icon" />}  />);
+    render(<Search defaultValue="value" icon={<div data-testid="icon" />}  />);
     await userEvent.click(screen.getByTestId('icon'));
     act(jest.runAllTimers);
     expect(cb).toHaveBeenCalled();

@@ -10,6 +10,7 @@ import { useConfigDirection } from '../../hooks/useConfigDirection';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useNativeFormResetListener } from '../../hooks/useNativeFormResetListener';
 import { usePlatform } from '../../hooks/usePlatform';
+import { useCSSKeyframesAnimationController } from '../../lib/animation';
 import { callMultiple } from '../../lib/callMultiple';
 import { touchEnabled } from '../../lib/touch';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
@@ -20,6 +21,15 @@ import { Headline } from '../Typography/Headline/Headline';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './Search.module.css';
 
+const controlsAnimationStateClassNames = {
+  enter: styles.controlsStateEnter,
+  entering: styles.controlsStateEnter,
+  entered: styles.controlsStateEnter,
+  exit: styles.controlsStateExit,
+  exiting: styles.controlsStateExit,
+  exited: undefined,
+};
+
 export type RenderIconButtonFn = (
   icon: React.ReactNode,
   props?: Partial<IconButtonProps> & HasDataAttribute,
@@ -121,6 +131,12 @@ export const Search = ({
   const checkHasValue: React.ChangeEventHandler<HTMLInputElement> = (e) =>
     setHasValue(Boolean(e.currentTarget.value));
 
+  const [controlsAnimationState, controlsAnimationHandlers] = useCSSKeyframesAnimationController(
+    hasValue ? 'enter' : 'exit',
+    {},
+    true,
+  );
+
   const { sizeY = 'none' } = useAdaptivity();
   const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();
   const platform = usePlatform();
@@ -231,37 +247,45 @@ export const Search = ({
              checkHasValue)}
           />
         </div>
-        <div className={styles.controls}>
-          {iconProp &&
-            (typeof iconProp === 'function'
-              ? iconProp(renderIconButton)
-              : renderIconButton(iconProp))}
-          <IconButton
-            hoverMode="opacity"
-            >
-            >
-            className={styles.icon}
-            tabIndex={hasValue ? undefined : -1}
-            disabled={inputProps.disabled}
-            data-testid={clearButtonTestId}
+        {controlsAnimationState !== 'exited' && (
+          <div
+            {...controlsAnimationHandlers}
+            className={classNames(
+              styles.controls,
+              controlsAnimationStateClassNames[controlsAnimationState],
+            )}
           >
-            <VisuallyHidden>{clearLabel}</VisuallyHidden>
-            {platform === 'ios' ? <Icon16Clear /> : <Icon24Cancel />}
-          </IconButton>
-          {adaptiveSizeY.compact && onFindButtonClick && (
-            <Button
-              mode="primary"
-              size="m"
-              className={classNames(styles.findButton, adaptiveSizeY.compact.className)}
-              focusVisibleMode="inside"
-              >
+            {iconProp &&
+              (typeof iconProp === 'function'
+                ? iconProp(renderIconButton)
+                : renderIconButton(iconProp))}
+            <IconButton
+              hoverMode="opacity"
+              >
+              >
+              className={styles.icon}
               tabIndex={hasValue ? undefined : -1}
-              data-testid={findButtonTestId}
+              disabled={inputProps.disabled}
+              data-testid={clearButtonTestId}
             >
-              {findButtonText}
-            </Button>
-          )}
-        </div>
+              <VisuallyHidden>{clearLabel}</VisuallyHidden>
+              {platform === 'ios' ? <Icon16Clear /> : <Icon24Cancel />}
+            </IconButton>
+            {adaptiveSizeY.compact && onFindButtonClick && (
+              <Button
+                mode="primary"
+                size="m"
+                className={classNames(styles.findButton, adaptiveSizeY.compact.className)}
+                focusVisibleMode="inside"
+                >
+                tabIndex={hasValue ? undefined : -1}
+                data-testid={findButtonTestId}
+              >
+                {findButtonText}
+              </Button>
+            )}
+          </div>
+        )}
       </div>
       {hasAfter && (
         <div className={styles.after}>