diff --git a/packages/vkui/src/components/CustomSelect/CustomSelect.e2e.tsx b/packages/vkui/src/components/CustomSelect/CustomSelect.e2e.tsx index 0204e294e9..9989e91bee 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 48ba8b2035..22f520c9f2 100644 --- a/packages/vkui/src/components/CustomSelect/CustomSelect.tsx +++ b/packages/vkui/src/components/CustomSelect/CustomSelect.tsx @@ -857,6 +857,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`, выбранной в данный момент опции.