Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

iPad Select bug #2121

Open
ijakparov opened this issue Mar 27, 2020 · 3 comments
Open

iPad Select bug #2121

ijakparov opened this issue Mar 27, 2020 · 3 comments

Comments

@ijakparov
Copy link

ijakparov commented Mar 27, 2020

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

@veged
Copy link
Member

veged commented Mar 27, 2020

related #1711

@ijakparov
Copy link
Author

ijakparov commented Apr 7, 2020

Поднял на чистом 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
Copy link
Author

ijakparov commented May 23, 2020

Можно переопределить метод 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);
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants