fix(Search): edit after transition

packages/vkui/src/components/Search/Search.module.css

@@ -26,9 +26,10 @@
 }
 
 .Search__field {
-  flex: 2;
   position: relative;
   display: flex;
+  flex-grow: 2;
+  flex-basis: 0%;
   block-size: var(--vkui_internal--search_height);
   background-color: var(--vkui--color_search_field_background);
   border-radius: var(--vkui--size_border_radius--regular);
@@ -158,29 +159,39 @@
 }
 
 .Search__after {
-  flex: 0;
-  transform-origin: left;
-  min-inline-size: initial;
+  position: relative;
+  display: flex;
+  flex-grow: 0;
+  flex-basis: 0%;
+  min-inline-size: 0;
   max-inline-size: min-content;
+  transition: flex-grow 0.3s var(--vkui--animation_easing_platform);
   pointer-events: none;
-  transition-timing-function: var(--vkui--animation_easing_platform);
-  transition-duration: 0.3s;
-  transition-property: flex, margin-inline;
-  overflow: hidden;
-  margin-inline: 0;
 }
 
 .Search--focused .Search__after,
 .Search--has-value .Search__after {
-  flex: 1;
+  flex-grow: 1;
   pointer-events: initial;
-  margin-inline: 4px calc(4px - var(--vkui--size_base_padding_horizontal--regular));
 }
 
-.Search__afterText {
+.Search__after::before,
+.Search__after::after {
+  content: '';
+  flex-shrink: 0;
+  display: block;
+  inline-size: 4px;
+  block-size: 100%;
+}
+
+.Search--withPadding .Search__after::after {
+  margin-inline-end: calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
+}
+
+.Search__afterTextClip {
   display: block;
-  white-space: nowrap;
   text-overflow: clip;
+  white-space: nowrap;
   overflow: hidden;
 }
 

packages/vkui/src/components/Search/Search.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';
-import { classNames, noop } from '@vkontakte/vkjs';
+import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
 import { useBooleanState } from '../../hooks/useBooleanState';
@@ -92,6 +92,8 @@ export const Search = ({
   const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();
   const platform = usePlatform();
 
+  const hasAfter = platform === 'ios' && hasReactNode(after);
+
   const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {
     setFocusedTrue();
     inputProps.onFocus && inputProps.onFocus(e);
@@ -164,7 +166,7 @@ export const Search = ({
         sizeY === 'compact' && styles['Search--sizeY-compact'],
         isFocused && styles['Search--focused'],
         hasValue && styles['Search--has-value'],
-        after && styles['Search--has-after'],
+        hasAfter && styles['Search--has-after'],
         iconProp && styles['Search--has-icon'],
         inputProps.disabled && styles['Search--disabled'],
         !noPadding && styles['Search--withPadding'],
@@ -225,18 +227,21 @@ export const Search = ({
           )}
         </div>
       </div>
-      {platform === 'ios' && after && (
-        <Button
-          mode="tertiary"
-          size="m"
-          className={styles['Search__after']}
-          focusVisibleMode="inside"
-          onClick={onCancel}
-          onFocus={setFocusedTrue}
-          onBlur={setFocusedFalse}
-        >
-          <span className={styles['Search__afterText']}>{after}</span>
-        </Button>
+      {hasAfter && (
+        <div className={styles['Search__after']}>
+          <Button
+            mode="tertiary"
+            size="m"
+            focusVisibleMode="inside"
+            hoverMode="opacity"
+            activeMode="opacity"
+            onClick={onCancel}
+            onFocus={setFocusedTrue}
+            onBlur={setFocusedFalse}
+          >
+            <span className={styles['Search__afterTextClip']}>{after}</span>
+          </Button>
+        </div>
       )}
     </div>
   );