mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.76k stars 32.24k forks source link

[Tabs] Tabs doesn't work with Tab as a custom component #27947

Open w3lld1 opened 3 years ago

w3lld1 commented 3 years ago

Current Behavior 😯

Tabs doesn't switch between Tab if it's a custom component that returns Tab

Expected Behavior 🤔

The same behavior as with Tab

Steps to Reproduce 🕹

You can see this behavior here

Steps:

  1. Create component that returns Tab
  2. Use it in Tabs instead of Tab
eps1lon commented 3 years ago

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://material-ui.com/r/issue-template-next), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

w3lld1 commented 3 years ago

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://material-ui.com/r/issue-template-next), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

I provided codesandbox example in my first message. Sorry if it wasn't noticeable.

Duplicate here: https://codesandbox.io/s/material-demo-forked-vo6zv

eps1lon commented 3 years ago

I provided codesandbox example in my first message. Sorry if it wasn't noticeable.

My bad, sorry.

I checked the codesandbox and the issue is that props aren't spread to the actual Tab component like so:

-function CustomTab({ value }) {
-  return <Tab value={value} label={value} />;
+function CustomTab({ value, ...props }) {
+  return <Tab value={value} label={value} {...props} />;
}

Leaving this open since this is probably something we want to investigate for our experimental Tab API or at least provide a runtime warning.