Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[TabPanel] Type mismatch between tabContext and tanPanel #44149

Closed
blackcow1987 opened this issue Oct 18, 2024 · 4 comments
Closed

[TabPanel] Type mismatch between tabContext and tanPanel #44149

blackcow1987 opened this issue Oct 18, 2024 · 4 comments
Labels
component: tabs This is the name of the generic UI component, not the React module! package: lab Specific to @mui/lab

Comments

@blackcow1987
Copy link
Contributor

blackcow1987 commented Oct 18, 2024

Steps to reproduce

According to TabPanel's type definition, value must be a string.

https://github.com/mui/material-ui/blob/v6.1.4/packages/mui-lab/src/TabPanel/TabPanel.d.ts#L24

  /**
   * The `value` of the corresponding `Tab`. Must use the index of the `Tab` when
   * no `value` was passed to `Tab`.
   */
  value: string;
};

But according to TabContext's type definition, value must be a string or number.

https://github.com/mui/material-ui/blob/v6.1.4/packages/mui-lab/src/TabContext/TabContext.d.ts#L16

  /**
   * The value of the currently selected `Tab`.
   */
  value: string | number;
}

When using TabContext, because the currently active tab information is stored in the Context and compared within the TabPanel component, the value ​​of the two components must use the same type.

https://github.com/mui/material-ui/blob/v6.1.4/packages/mui-lab/src/TabPanel/TabPanel.js#L50

  const context = useTabContext();
  if (context === null) {
    throw new TypeError('No TabContext provided');
  }
  const id = getPanelId(context, value);
  const tabId = getTabId(context, value);

  return (
    <TabPanelRoot
      aria-labelledby={tabId}
      className={clsx(classes.root, className)}
      hidden={value !== context.value}

Current behavior

The value ​​of TabContext and TabPanel are using different types.

Expected behavior

The value ​​of TabContext and TabPanel must use the same type.

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: TabPanel

@blackcow1987 blackcow1987 added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 18, 2024
@zannager zannager added component: tabs This is the name of the generic UI component, not the React module! package: lab Specific to @mui/lab labels Oct 18, 2024
@mj12albert mj12albert removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 24, 2024
@mj12albert
Copy link
Member

value: string | number looks correct to me, @blackcow1987 are you interested in opening a PR?

@blackcow1987
Copy link
Contributor Author

@mj12albert Yes, I'm checking out the guidelines for contribution :)

blackcow1987 added a commit to blackcow1987/material-ui that referenced this issue Oct 25, 2024
@ZeeshanTamboli
Copy link
Member

This was fixed in #44207

Copy link

github-actions bot commented Nov 1, 2024

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@blackcow1987 How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: tabs This is the name of the generic UI component, not the React module! package: lab Specific to @mui/lab
Projects
None yet
Development

No branches or pull requests

5 participants