[material-ui][Tabs] Scrollable variant slow animation on iOS and don't set click during it
Open
Nobody has claimed this yet.
scope: tabs
type: bug
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Steps to reproduce
Link to live example: https://mui.com/material-ui/react-tabs/#forced-scroll-buttons
Steps:
- Open the link through the mobile version of Safari
- Scroll through the tabs and try to click them while the animation is still running
- Shows the click animation but does not select the tab
Current behavior
When clicking on the tab, the animation of the tab has not yet finished, the tab is animated as clicked but is not set
Expected behavior
https://github.com/mui/material-ui/assets/107551457/e152059f-d2f3-4d9e-ae67-95c85b5fe050
Context
No response
Your environment
npx @mui/envinfo
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
Search keywords: Tabs ios MUI scroll
Contributor guide
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.
Research direction
Start with the linked Tabs forced-scroll-buttons example in mobile Safari and reproduce the interaction while the scroll animation is running. Trace the Tabs scrollable variant from that example, then verify that clicking during the animation selects the intended tab and that the interaction remains responsive.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100