[Tabs] scrollIntoView blocked by scrollable tabs
@siriwatknp is already working on this.
Since Jun 20, 2022.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
I am trying to use Tabs component to navigate user on page - on tab change I call scrollIntoView to some section on page. It works well in most cases, except when I am on small device tabs turns into scrollable tabs - it that case when I click on tab which is not entirely visible nice animation to switch tabs appear but scrollIntoView is not working (page is not scrolled to section).
Update: window.scrollTo works fine, also without behaviour: smooth it works without problem
Expected behavior 🤔
scrollIntoView is working in all cases OR there is a way how to know that tabs scroll animation ended so I can delay my scroll functionality
Steps to reproduce 🕹
Steps:
-
Open minimal example https://codesandbox.io/s/react-mui-forked-dfm2q5?file=/index.js
-
Resize preview so some tab is only partialy visible e.g.
-
click on partially hidden tab (3rd tab) - tabs are switched but view is not scrolled to 3rd tab
-
click on some visible tab or click again on 3rd tab - view is scrolled using scrollIntoView
Context 🔦
No response
Your environment 🌎
`npx @mui/envinfo`
System:
OS: Windows 10 10.0.22000
CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
Memory: 3.82 GB / 15.89 GB
Binaries:
Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 8.5.5 - C:\Projects\my-business-v3\node_modules.bin\npm.CMD
Managers:
pip3: 20.2.3 - C:\Python39\Scripts\pip3.EXE
Utilities:
Git: 2.21.0.
Virtualization:
Docker: 20.10.13 - C:\Program Files\Docker\Docker\resources\bin\docker.EXE
IDEs:
Android Studio: Version 3.4.0.0 AI-183.6156.11.34.5522156
VSCode: 1.67.2 - C:\Users\OndrejBrynda\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD
Visual Studio: 16.11.32407.337 (Visual Studio Professional 2019)
Languages:
Python: 3.9.2
Browsers:
Chrome: 101.0.4951.67
Edge: Spartan (44.22000.120.0), Chromium (101.0.1210.53)
Internet Explorer: 11.0.22000.120
Tested in Chrome, Firefox
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.
Assessment
This issue has not been assessed yet.