gravity-ui / uikit

https://gravity-ui.com
MIT License
516 stars 84 forks source link

Slider + Sheet, уезжает шторка на мобильных устройствах #1659

Closed lu-perfect closed 1 week ago

lu-perfect commented 2 weeks ago

https://stackblitz.com/edit/vitejs-vite-adc1ru?file=src%2FApp.tsx

При комбинации шторки и слайдера, при слайде, шторка начинает убегать

telegram-cloud-photo-size-2-5443003378843115770-y

korvin89 commented 2 weeks ago

@Arucard89 Hey! Could you check this problem?

Arucard89 commented 1 week ago

@lu-perfect, привет! У компонента Sheet есть свойство allowHideOnContentScroll - его нужно выставить в false.

<Sheet
        visible={visible}
        onClose={() => setVisible(false)}
        title="Фильтры"

        allowHideOnContentScroll={false} 
> 
... 
</Sheet>

При такой настройке компонента работа слайдера не будет влиять на поведение шторки.

korvin89 commented 1 week ago

@Arucard89 но там же не про скролл речь? Мне кажется тут проблема в том, что stopPropаgation в Slider ломает шторку

Arucard89 commented 1 week ago

@Arucard89 но там же не про скролл речь? Мне кажется тут проблема в том, что stopPropаgation в Slider ломает шторку

Проблема появляется только при включении перемещения шторки через протаскивание по области ее контента. Да, @korvin89, ты абсолютно прав: такое поведение вызвано прерыванием распространения события в слайдере: https://github.com/react-component/slider/blob/master/src/hooks/useDrag.ts#L99

выключение allowHideOnContentScroll предложенное мной выше - это временное решение проблемы, чтобы сайт мог работать уже сейчас, не дожидаясь выхода новой версии библиотеки.

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

Arucard89 commented 1 week ago

@lu-perfect, привет. фикс уже в релизе 6.19(https://github.com/gravity-ui/uikit/blob/main/CHANGELOG.md#bug-fixes). можно обновиться и отказаться от проставления allowHideOnContentScroll, если он не нужен.