[Bug]: CustomSelect, Не работает выбор опций в мобильной версии браузера

[igorpichnenko]

Описание

Взял пример из доки

const selectTypes = [
{
label: 'default',
value: 'default',
},
{
label: 'plain',
value: 'plain',
},
{
label: 'accent',
value: 'accent',
},
];

const [selectType, setSelectType] = React.useState(undefined);

<CustomSelect
value={selectType}
placeholder="Не задан"
options={selectTypes}
onChange={(e) => setSelectType(e.target.value)}
renderOption={({ option, ...restProps }) => (
<CustomSelectOption {...restProps} description={"${option.value}"} />
)}
/>

Далее дополнительно в консоль вывел event console.log(e) который должен получать на каждое срабатывание onChange,
Если выбираю варианты в пк версии то все ок и варианты изменяются и в консоль при каждом изменении варианта выводится event onchange, если переключаюсь на мобильную версию то выбор срабатывает только 1 раз и событие onChange срабатывает 1 раз, далее не получаю событие onChange и другие варианты не выбираются.

Если открыть документацию в хроме и переключиться на мобильный вариант то все работает и варианты меняются каждый раз.

Хотелось бы узнать какая версия react и vkui используется для примера в документации?

Я использую react 18.2.0 и vkui 5.3.1

Версия

5.3.1

В каких браузерах воспроизводится проблема?

Chrome

Шаги воспроизведения

В хром открыть панель разработчиков и выбрать например Responsive или IPhone SE
Несколько раз выбрать разные варианты в селекте

Так же можно воспроизвести открыв на телефоне https://codesandbox.io/s/nifty-cori-b9cl36?file=/src/App.js и попробовать выбрать разные варианты в селекте несколько раз

Ожидаемое поведение

Варианты изменяются каждый раз

Скриншоты

No response

Пример с воспроизведением

https://codesandbox.io/s/nifty-cori-b9cl36?file=/src/App.js

[inomdzhon]

Хотелось бы узнать какая версия react и vkui используется для примера в документации?

В доке react 17.

---

Я проверил https://codesandbox.io/s/nifty-cori-b9cl36?file=/src/App.js и не смог воспроизвести.

• Устройство: iPhone 12 Pro
• Браузеры: Safari 16.4.1, Chrome 112.0.5615.70 (под капотом, конечно, webkit'овый хром)

А вот в Chrome в режиме Responsive проблема наблюдаю. Дело в React 18, там иначе теперь useEffect() срабатывает.

---

Ты мог бы скинуть модель телефона и браузер, в котором у тебя воспроизводится проблема?

PS: Вообще CustomSelect стоит использовать для десктоп, а для мобилок NativeSelect. У нас есть компонент Select, который переключает эти два компонента в зависимости от того, есть ли указатель мыши или нет.

[igorpichnenko]

Устройтсво lg v50s android 12, браузер хром версия последняя 112.0.5615.135

[inomdzhon]

Устройтсво lg v50s android 12, браузер хром версия последняя 112.0.5615.135

Проверил на Android – смог воспроизвести. Всё же дело в React 18.

---

Возвращаясь к сообщению выше:

PS: Вообще CustomSelect стоит использовать для десктоп, а для мобилок NativeSelect. У нас есть компонент Select, который переключает эти два компонента в зависимости от того, есть ли указатель мыши или нет.

Повторюсь, что CustomSelect рассчитан всё-таки для десктопа, в его реализации используются события onMouseDown и onMouseOver, которые по логике подточены для мышки. Как видишь, в React 17 всё было нормально, а в React 18 уже не работоспособно.

Следует использовать компонент Select, который подстроиться под десктоп и натив.