mui / mui/material-ui

[material][Tabs] Disable scroll animation via prop

Open
#42,181 1 comment 1 reaction 1 assignee View on GitHub

@brijeshb42 is already working on this.

Since May 10, 2024.

scope: tabs type: new feature waiting for 👍
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

Summary

An additional prop should be added to Tabs that disables the scroll animations. The functionality for disabling the scroll animation is already built-in, but it is not exposed as a prop. I'd recommend disableScrollAnimation.

Examples

None needed.

Motivation

When using scrollable tabs in frameworks with ssr and rehydration, scrolling occurs when the tabs are first loaded.

While preventing scroll on initial mounting was said to be fixed in #25469, this solution does not appear to work when using frameworks like Next.js (though it does work in vanilla react).

This is especially annoying as in Next.js layout components are remounted on navigation, causing the tabs to re-scroll on every navigation in some scenarios.

I'd like to be able to disable the scroll animations directly.

You can see this problem in action on my website in mobile view on certain pages: https://panfactum.com/docs/reference/infrastructure-modules/aws_dnssec.

Source code here: https://github.com/Panfactum/stack/blob/5fec677b42707b0dc49fd6b7d5bd76352f7985dc/packages/website/src/components/layout/web/secondary/tabs/CustomRenderedTabs.tsx#L58

Search keywords: tabs disable scroll

Contributor guide

Open the contributing guide

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.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.