react-component / react-component/tabs

Tab bar prevents swipe up/down on mobile browser

Open
#368 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
572
Forks
241
Avg merge
4d 18h
Merged PRs (30d)
4

Description

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:
https://github.com/irvanherz/tabs/commit/251d8713e6751650f52585d83aa9349c9f7a13c8#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.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by inspecting useTouchMove.ts and reproduce the behavior from the linked CodeSandbox on a mobile browser, focusing on swipes that begin on the tab bar. Done means vertical page scrolling works from the tab bar without breaking the tab interaction behavior described in the issue.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, mobile-dev
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.