Tab bar prevents swipe up/down on mobile browser
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 35/100
- Issue type
- Bug
- Clarity
- Clearly specified
- Activity status
- Stale
- Tech stack
- react, typescript
- Domain
- frontend, mobile-dev
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.
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
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.
- Dominant language
- TypeScript
- Stars
- 572
- Forks
- 241
- Avg merge
- 4d 18h
- Merged PRs (30d)
- 4
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from react-component/tabs
-
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
react-component/tabs#865 · 1 comment ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
react-component/tabs#809 · 1 comment ·
-
Difficulty 4/5 3-5 days Newbie friendliness 64/100
react-component/tabs#1013 · 1 comment ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 48/100
react-component/tabs#777 · 1 reaction ·
-
Difficulty 3/5 1-2 days Newbie friendliness 25/100
react-component/tabs#726 ·
All issues in react-component/tabs
Similar issues
-
VerificationGate: ATTRIBUTION quote guard never matches a normal quotation (\b around the quote) Open
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
danielmiessler/LifeOS#2234 ·
-
T: Bug
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
-
Difficulty 1/5 Under an hour Newbie friendliness 85/100
-
Mend: dependency security vulnerability untriaged
Difficulty 2/5 1-3 hours Newbie friendliness 70/100