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.

Sign up for GitHub

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

Jump to bottom

Tab bar prevents swipe up/down on mobile browser #368

Open
irvanherz opened this issue Mar 12, 2021 · 3 comments · May be fixed by #431
Open

Tab bar prevents swipe up/down on mobile browser #368

irvanherz opened this issue Mar 12, 2021 · 3 comments · May be fixed by #431

Comments

@irvanherz
Copy link

Hi, actually I'm coming here because of an issue that I've found in ant-design's tab. I recently discovered that the location of the problem was in rc-tabs. So I tried cloning the master branch and inspecting where the problem was. Finally I found that this problem can be solved by removing e.preventDefault() in useTouchMove.ts file.

You can see it on the branch I forked:
irvanherz@251d871#diff-6098251a64dc37073e837fba36078438a119c06311050fdbc9975bcbd632c60e

Is this small change ok to fix the bug?

Reproduction link

Edit on CodeSandbox

Steps to reproduce

From any mobile browser, try to swipe view up or down by starting finger touching Tabs' bar.

What is expected?

It should scrolling view up/down as I swipe.

What is actually happening?

It does nothing.

Environment Info
antd 4.13.1
React 17.0.1
System Android 7.1.2; Redmi 5A Build/N2G47H
Browser Chrome Version 88.0.4324.181

My project using many tabs at home page. This bug oftenly brings problem for any users who open the page from mobile browser.
@pplcallmesatz
Copy link

Hi team,

This issue occurs for us too, and once we removed the e.preventDefault(); from /hooks/useTouchMove.ts line number 34 working fine for us.

@hnhattien
Copy link

hnhattien commented May 1, 2022 •
edited

You don't have to edit code in node_modules, only add event touchmove on parent element of target element that register event to prevent you scroll. Afterward you add ev.stopPropagation() with ev is parameter to event handler. Problem resolved!

@Chorer
Copy link

Chorer commented Dec 6, 2022

You don't have to edit code in node_modules, only add event touchmove on parent element of target element that register event to prevent you scroll. Afterward you add ev.stopPropagation() with ev is parameter to event handler. Problem resolved!

Which parent element? And why does this work？

@zombieJ zombieJ linked a pull request Dec 6, 2022 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fixed the scrolling issue occurring in mobile pplcallmesatz/tabs
4 participants
@irvanherz @pplcallmesatz @Chorer @hnhattien