iPad Select bug

[ijakparov]

Селект из bem-components не корректно работает на iPad.Если высота списка ограничена и колличество опций активирует скролл, то при попытке скролла выбирается опция по которой был свайп. Пример в каталоге на сайте https://xn--72-6kcafe0b4cdqer.xn--p1ai/catalog/dvigatel/ Правое меню, выбор марки авто.

[veged]

related https://github.com/bem/bem-components/issues/1711

[ijakparov]

Поднял на чистом bem express для воспроизведения бага https://mikhaylovsky.develop72.ru/

deps

({
    shouldDeps: [
        {
            block: 'select',
            mods: {
                theme: 'islands',
                size: 'l',
                mode: 'radio',

            },
        }
    ]
})

bemhtml

block('header')({
    content: () => [

        {
            block: 'select',
            mods: {
                theme: 'islands',
                size: 'l',
                mode: 'radio',

            },
            optionsMaxHeight: 150,
            options: [
                {
                    text: 'Синий',
                    val: '1'
                },
                {
                    text: 'Белый',
                    val: '2'
                },
                {
                    text: 'Розовый',
                    val: '3'
                },
                {
                    text: 'Зеленый',
                    val: '4'
                },
                {
                    text: 'Хакки',
                    val: '5'
                },
                {
                    text: 'Танки',
                    val: '6'
                },
                {
                    text: 'Пушки',
                    val: '7'
                },
                {
                    text: 'Рыба',
                    val: '8'
                },
                {
                    text: 'Нож',
                    val: '9'
                },
                {
                    text: 'Ухо',
                    val: '10'
                },
                {
                    text: 'Горло',
                    val: '11'
                },
                {
                    text: 'Нос',
                    val: '12'
                },
                {
                    text: 'Пиво',
                    val: '13'
                },
                {
                    text: 'Раки',
                    val: '14'
                },
                {
                    text: 'Хлеб',
                    val: '15'
                },
                {
                    text: 'Уха',
                    val: '16'
                },
                {
                    text: 'Кошка',
                    val: '17'
                },
                {
                    text: 'Мышка',
                    val: '18'
                },
                {
                    text: 'Песня',
                    val: '19'
                },
                {
                    text: 'Пес',
                    val: '20'
                },
                {
                    text: 'Сова',
                    val: '21'
                },
                {
                    text: 'Снег',
                    val: '22'
                },

            ]
        }
    ]
});

[ijakparov]

Можно переопределить метод onInit у блока menu в ibem-js добавив проверку на скрол тачем:

onInit: function () {
    var touchMoving = false;
    document.ontouchmove = function (e) {
        touchMoving = true;
    }
    document.ontouchend = function (e) {
        touchMoving = false;
    }

    this._events(MenuItem)
        .on({ modName: 'hovered', modVal: '*' }, function (e) {
            this._onItemHover(e.target);
        })
        .on('click', function (e, data) {
            if (touchMoving == false) {
                this._onItemClick(e.target, data);
            }
        });

    return this.__base.apply(this, arguments);
}