From c4b680248c77f5a8c40d2644111d55b3344a5036 Mon Sep 17 00:00:00 2001 From: Andrey Medvedev Date: Mon, 18 Dec 2023 11:38:59 +0300 Subject: [PATCH] fix[CustomSelect]: Disable autocomplete tooltip on iOS in readonly mode (#6274) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Согласно #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}`, чтобы их мог бы задать/поменять пользователь. --- .../CustomSelect/CustomSelect.e2e.tsx | 8 ++- .../components/CustomSelect/CustomSelect.tsx | 3 ++ .../CustomSelect/CustomSelectClearButton.tsx | 4 +- .../CustomSelect/CustomSelectInput.tsx | 50 +++++++++++++------ .../src/components/CustomSelect/Readme.md | 4 +- 5 files changed, 50 insertions(+), 19 deletions(-) diff --git a/packages/vkui/src/components/CustomSelect/CustomSelect.e2e.tsx b/packages/vkui/src/components/CustomSelect/CustomSelect.e2e.tsx index e52041ab22..22aed9fddd 100644 --- a/packages/vkui/src/components/CustomSelect/CustomSelect.e2e.tsx +++ b/packages/vkui/src/components/CustomSelect/CustomSelect.e2e.tsx @@ -27,7 +27,13 @@ test.describe('CustomSelect', () => { }) => { await mount(); - await page.getByTestId('target-select').click(); + await page + .getByTestId('target-select') + /* + * Используем force, потому что на платформе ios у селекта в обычном режиме (не searchable) + * спрятан инпут, чтобы не появлялся тултип autosuggestion на iOS при клике на инпут. + **/ + .click({ force: componentPlaygroundProps.platform === 'ios' }); await expectScreenshotClippedToContent(); }); diff --git a/packages/vkui/src/components/CustomSelect/CustomSelect.tsx b/packages/vkui/src/components/CustomSelect/CustomSelect.tsx index d9e5eeaaf6..5fcc28bad2 100644 --- a/packages/vkui/src/components/CustomSelect/CustomSelect.tsx +++ b/packages/vkui/src/components/CustomSelect/CustomSelect.tsx @@ -836,6 +836,9 @@ export function CustomSelect { return ( + ); + + const platform = usePlatform(); return ( - + {/* Чтобы отключить autosuggestion в iOS, тултипы которого начинают всплывать даже когда input + * в режиме readonly, мы оборачиваем инпут в VisuallyHidden. + * Тултипы появляются при каждом клике на input. + * смотри: https://github.com/VKCOM/VKUI/issues/6205 + * + * Достаточно не дать пользователю кликнуть по инпуту. + * Делаем это только для режима read-only. Потому что проблема именно в режиме read-only. + * Обертка вокруг инпута обрабатывает клики и передаёт фокус, так что на взаимодействии с инпутом это никак не скажется. + **/} + {restProps.readOnly && platform === 'ios' ? ( + {input} + ) : ( + input + )} ); diff --git a/packages/vkui/src/components/CustomSelect/Readme.md b/packages/vkui/src/components/CustomSelect/Readme.md index 4a8d5f2e1d..81120967c6 100644 --- a/packages/vkui/src/components/CustomSelect/Readme.md +++ b/packages/vkui/src/components/CustomSelect/Readme.md @@ -13,7 +13,9 @@ - получения текста, введённого пользователем при поиске опций, в режиме `searchable`; - получения информации о наличии фокуса на компоненте; - симуляции работы с компонентом с клавиатуры. -- для получения текста, выбранной в данный момент опции используйте свойство `labelTextTestId`. +- используйте `labelTextTestId`: + - для симуляции работы с компонентом с помощью мыши, тач-устройства; + - для получения текста выбранной в данный момент опции. - для взаимодействия с кнопкой очистки состояния компонента, которая появляется, если `CustomSelect` имеет свойство `searchable` и пользователь выбрал опцию, используйте свойство `clearButtonTestId`. - `CustomSelect` внутри себя хранит невидимый `` используйте свойство `nativeSelectTestId`. Полезно для доступа к значению `value`, выбранной в данный момент опции.