Skip to content

fix(Search): truncate long after text with ellipsis#9862

Open
Vitalymt wants to merge 2 commits into
VKCOM:masterfrom
Vitalymt:fix/search-text-truncation
Open

fix(Search): truncate long after text with ellipsis#9862
Vitalymt wants to merge 2 commits into
VKCOM:masterfrom
Vitalymt:fix/search-text-truncation

Conversation

@Vitalymt
Copy link
Copy Markdown

Problem

When the after prop in the Search component contains a long string (e.g. 'длинная отмена'), the text overflows the search field boundary instead of being truncated. This is specific to iOS platform where the after slot is rendered.

The .afterTextClip class uses text-overflow: clip which silently clips text without any visual indicator, and the .after container lacks overflow: hidden allowing the Button content to escape its bounds.

Steps to reproduce:

  1. Set platform to iOS
  2. Render <Search after="длинная отмена" />
  3. Focus the search input
  4. The text overflows outside the search field

Fix

  • CSS: Change text-overflow: clip to text-overflow: ellipsis in .afterTextClip — consistent with every other truncation pattern in VKUI (RichCell, MiniInfoCell, FormItem, Header, Button, etc.)
  • CSS: Add overflow: hidden to .after container to properly constrain the Button content within flex bounds
  • E2E test: Add test case with long after text ('длинная отмена') to verify truncation behavior on iOS

Fixes #9795

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 VKCOM#9795
@Vitalymt Vitalymt requested a review from a team as a code owner May 27, 2026 18:24
@github-actions
Copy link
Copy Markdown
Contributor

📊 Найдены изменения в собранных файлах: Отчет

Commit fdc5746

@github-actions
Copy link
Copy Markdown
Contributor

👀 Docs deployed

📦 Package ✅

yarn add @vkontakte/vkui@https://development.s3.prodcloud.vk.team/pull/9862/fdc57466d8d44a661304c7f8e492d803704be065/pkg/@vkontakte/vkui/_pkg.tgz

Commit fdc5746

@codecov
Copy link
Copy Markdown

codecov Bot commented May 27, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 95.22%. Comparing base (ba6f343) to head (fdc5746).

Additional details and impacted files
@@           Coverage Diff           @@
##           master    #9862   +/-   ##
=======================================
  Coverage   95.22%   95.22%           
=======================================
  Files         462      462           
  Lines       12512    12512           
  Branches     4478     4478           
=======================================
  Hits        11914    11914           
  Misses        598      598           
Flag Coverage Δ
unittests 95.22% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug][Search]: Обрезается длинный текст в after

1 participant