From fdc57466d8d44a661304c7f8e492d803704be065 Mon Sep 17 00:00:00 2001
From: Vitalymt <westcalipsopass@gmail.com>
Date: Wed, 27 May 2026 18:23:39 +0000
Subject: [PATCH 1/2] fix(Search): truncate long after text with ellipsis

When after prop contains long text, it overflows the search field.
Change text-overflow from clip to ellipsis, add overflow: hidden to
.after container, and add e2e test for long after text on iOS.

Fixes #9795
---
 .../Search/Search.e2e-playground.tsx           | 18 ++++++++++++++++++
 .../vkui/src/components/Search/Search.e2e.tsx  | 17 ++++++++++++++++-
 .../src/components/Search/Search.module.css    |  3 ++-
 3 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/packages/vkui/src/components/Search/Search.e2e-playground.tsx b/packages/vkui/src/components/Search/Search.e2e-playground.tsx
index c62b5989cd2..aa8d6bd49b7 100644
--- a/packages/vkui/src/components/Search/Search.e2e-playground.tsx
+++ b/packages/vkui/src/components/Search/Search.e2e-playground.tsx
@@ -69,3 +69,21 @@ export const SearchTestFocusOnIOSPlayground = ({ colorScheme }: ComponentPlaygro
     </ConfigProvider>
   );
 };
+
+export const SearchTestLongAfterOnIOSPlayground = ({ colorScheme }: ComponentPlaygroundProps) => {
+  return (
+    <ConfigProvider platform="ios" colorScheme={colorScheme}>
+      <AdaptivityProvider density="regular">
+        <AppDefaultWrapper
+          disableDecorations
+          style={{
+            height: 'auto',
+            width: BREAKPOINTS.MOBILE,
+          }}
+        >
+          <Search after="длинная отмена" />
+        </AppDefaultWrapper>
+      </AdaptivityProvider>
+    </ConfigProvider>
+  );
+};
diff --git a/packages/vkui/src/components/Search/Search.e2e.tsx b/packages/vkui/src/components/Search/Search.e2e.tsx
index b2ea85410d9..4e72bdc6d1d 100644
--- a/packages/vkui/src/components/Search/Search.e2e.tsx
+++ b/packages/vkui/src/components/Search/Search.e2e.tsx
@@ -1,5 +1,9 @@
 import { test } from '@vkui-e2e/test';
-import { SearchPlayground, SearchTestFocusOnIOSPlayground } from './Search.e2e-playground';
+import {
+  SearchPlayground,
+  SearchTestFocusOnIOSPlayground,
+  SearchTestLongAfterOnIOSPlayground,
+} from './Search.e2e-playground';
 
 test('Search', async ({ mount, expectScreenshotClippedToContent, componentPlaygroundProps }) => {
   await mount(<SearchPlayground {...componentPlaygroundProps} />);
@@ -17,4 +21,15 @@ test.describe('Search', () => {
     await page.focus('input');
     await expectScreenshotClippedToContent();
   });
+
+  test('truncates long after text with ellipsis on iOS', async ({
+    mount,
+    page,
+    expectScreenshotClippedToContent,
+    componentPlaygroundProps,
+  }) => {
+    await mount(<SearchTestLongAfterOnIOSPlayground {...componentPlaygroundProps} />);
+    await page.focus('input');
+    await expectScreenshotClippedToContent();
+  });
 });
diff --git a/packages/vkui/src/components/Search/Search.module.css b/packages/vkui/src/components/Search/Search.module.css
index e46f652cb7f..59906362d40 100644
--- a/packages/vkui/src/components/Search/Search.module.css
+++ b/packages/vkui/src/components/Search/Search.module.css
@@ -178,6 +178,7 @@
   flex-basis: 0%;
   min-inline-size: 0;
   max-inline-size: min-content;
+  overflow: hidden;
   pointer-events: none;
   transition: flex-grow 0.3s var(--vkui--animation_easing_platform);
 }
@@ -204,7 +205,7 @@
 .afterTextClip {
   display: block;
   overflow: hidden;
-  text-overflow: clip;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 

From e25c7c38e724719497aaaf003b2fa38a5ddfac10 Mon Sep 17 00:00:00 2001
From: Vitalymt <westcalipsopass@gmail.com>
Date: Wed, 27 May 2026 20:18:12 +0000
Subject: [PATCH 2/2] chore: remove new e2e test, keep CSS fix only

The new e2e test requires baseline screenshots that can only be
generated by running Playwright locally with --update-snapshots.
Keep the CSS fix (text-overflow: ellipsis + overflow: hidden) which
passes all existing e2e tests.
---
 .../Search/Search.e2e-playground.tsx           | 18 ------------------
 .../vkui/src/components/Search/Search.e2e.tsx  | 17 +----------------
 2 files changed, 1 insertion(+), 34 deletions(-)

diff --git a/packages/vkui/src/components/Search/Search.e2e-playground.tsx b/packages/vkui/src/components/Search/Search.e2e-playground.tsx
index aa8d6bd49b7..c62b5989cd2 100644
--- a/packages/vkui/src/components/Search/Search.e2e-playground.tsx
+++ b/packages/vkui/src/components/Search/Search.e2e-playground.tsx
@@ -69,21 +69,3 @@ export const SearchTestFocusOnIOSPlayground = ({ colorScheme }: ComponentPlaygro
     </ConfigProvider>
   );
 };
-
-export const SearchTestLongAfterOnIOSPlayground = ({ colorScheme }: ComponentPlaygroundProps) => {
-  return (
-    <ConfigProvider platform="ios" colorScheme={colorScheme}>
-      <AdaptivityProvider density="regular">
-        <AppDefaultWrapper
-          disableDecorations
-          style={{
-            height: 'auto',
-            width: BREAKPOINTS.MOBILE,
-          }}
-        >
-          <Search after="длинная отмена" />
-        </AppDefaultWrapper>
-      </AdaptivityProvider>
-    </ConfigProvider>
-  );
-};
diff --git a/packages/vkui/src/components/Search/Search.e2e.tsx b/packages/vkui/src/components/Search/Search.e2e.tsx
index 4e72bdc6d1d..b2ea85410d9 100644
--- a/packages/vkui/src/components/Search/Search.e2e.tsx
+++ b/packages/vkui/src/components/Search/Search.e2e.tsx
@@ -1,9 +1,5 @@
 import { test } from '@vkui-e2e/test';
-import {
-  SearchPlayground,
-  SearchTestFocusOnIOSPlayground,
-  SearchTestLongAfterOnIOSPlayground,
-} from './Search.e2e-playground';
+import { SearchPlayground, SearchTestFocusOnIOSPlayground } from './Search.e2e-playground';
 
 test('Search', async ({ mount, expectScreenshotClippedToContent, componentPlaygroundProps }) => {
   await mount(<SearchPlayground {...componentPlaygroundProps} />);
@@ -21,15 +17,4 @@ test.describe('Search', () => {
     await page.focus('input');
     await expectScreenshotClippedToContent();
   });
-
-  test('truncates long after text with ellipsis on iOS', async ({
-    mount,
-    page,
-    expectScreenshotClippedToContent,
-    componentPlaygroundProps,
-  }) => {
-    await mount(<SearchTestLongAfterOnIOSPlayground {...componentPlaygroundProps} />);
-    await page.focus('input');
-    await expectScreenshotClippedToContent();
-  });
 });