patch(v5): pr6274

[mendrew]

• close [Bug]: CustomSelect на iOS, при открытии появляется тултип «Автозаполнение» #6205

---

Важно

Это cherry-pick из #6274, из v6 в v5.

Описание

Согласно #6205 в мобильном iOS при клике на селект, в обычном режиме (не searchable), в верхней части страницы появляется тултип Автозаполнение. Появляется иммено в этом режиме, потому что в обычном режиме мы тоже показываем input, но он readonly. Ни одно из свойств, типа autoComplete и пр., не помогают, iOS их, в некотором смысле игнорирует.

В других библиотеках обычный селект просто не рендерит input, а довольствуется div.

Не хочется менять input на div, потому что это может привезти к тому, что при клике на связанный лэйбл div фокус не попадёт на селект.

Изменения

• решил, что лучшим решением будет спрятать инпут в режиме readonly. Это позволит избавится от назойливого тултипа. В то же время, это не изменит ничего во взаимодействии с селектом. Это не помешает фокусу на инпуте при клике, не помешает навигации с клавиатуры, фокус при клике на label продолжит работать. Всё потому, что у нас есть обёртка, которая всегда ловит клик и передаёт фокус инпуту. Альтернативный вариант решения это отключение pointer-events. Но хотелось этого избежать, потому что Playwright тогда не может по инпуту попасть. Пока искал решенеие пришел к VisuallyHidden. В целом можно и c pointer-events: none, результат будет тот же.

В режиме searchable input остаётся как есть, там тултип появляется в нормальном месте.

• в тоже время добавил свойства, которые по идее тоже должны были бы помочь, такие же свойства мы используем в ChipsSelect.
• переместил эти дополнительные свойства выше, до {...restProps}, чтобы их мог бы задать/поменять пользователь.

[github-actions]

size-limit report 📦

Path	Size
JS	370.97 KB (+0.04% 🔺)
JS (gzip)	111.69 KB (+0.04% 🔺)
JS (brotli)	90.66 KB (+0.02% 🔺)
JS import Div (tree shaking)	2.74 KB (0%)
CSS	285.59 KB (0%)
CSS (gzip)	36.55 KB (0%)
CSS (brotli)	29.1 KB (0%)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit e356ce3:

Sandbox	Source
VKUI TypeScript	Configuration

[github-actions]

e2e tests

Playwright Report

[github-actions]

👀 Docs deployed

• ✅ Styleguide
• ✅ Storybook

Commit e356ce3

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

❗ No coverage uploaded for pull request base (v5@596613d). Click here to learn what that means.

Additional details and impacted files

@@          Coverage Diff          @@
##             v5    #6402   +/-   ##
=====================================
  Coverage      ?   80.66%           
=====================================
  Files         ?      314           
  Lines         ?    10812           
  Branches      ?     3372           
=====================================
  Hits          ?     8722           
  Misses        ?     2090           
  Partials      ?        0           

Flag	Coverage Δ
unittests	80.66% <0.00%> (?)

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.

false start

[vkcom-publisher]

❌ Patch

Не удалось автоматически применить исправление на ветке v5.

Дальнейшие действия выполняют контрибьютеры из группы @VKCOM/vkui-core

Чтобы изменение попало в ветку v5, выполните следующие действия:

1. Создайте новую ветку от v5 и примените изменения используя cherry-pick

git stash # опционально
git fetch origin v5
git checkout -b patch/pr6402 origin/v5

git cherry-pick --no-commit 42fa1d1cadbaae08b9909e294462fb78c351ca98
git checkout HEAD **/__image_snapshots__/*.png
git diff --quiet HEAD || git commit --no-verify --no-edit

2. Исправьте конфликты, следуя инструкциям из терминала
3. Отправьте ветку на GitHub и создайте новый PR с веткой v5 (установка лейбла не требуется!)

git push --set-upstream origin patch/pr6402
gh pr create --base v5 --title "patch: pr6402" --body "- patch #6402"

[mendrew]

Ааа, это когда я сделал PR ready for review добавился лэйбл v5. Можно игнорировать, потому что я и так этим PR влил изменения в v5.

❌ Patch

Не удалось автоматически применить исправление на ветке v5.

Дальнейшие действия выполняют контрибьютеры из группы @VKCOM/vkui-core

Чтобы изменение попало в ветку v5, выполните следующие действия:

1. Создайте новую ветку от v5 и примените изменения используя cherry-pick

git stash # опционально
git fetch origin v5
git checkout -b patch/pr6402 origin/v5

git cherry-pick --no-commit 42fa1d1cadbaae08b9909e294462fb78c351ca98
git checkout HEAD **/__image_snapshots__/*.png
git diff --quiet HEAD || git commit --no-verify --no-edit

2. Исправьте конфликты, следуя инструкциям из терминала

3. Отправьте ветку на GitHub и создайте новый PR с веткой v5 (установка лейбла не требуется!)

git push --set-upstream origin patch/pr6402
gh pr create --base v5 --title "patch: pr6402" --body "- patch #6402"