[ListItemButton] Typescript error when passing Button or LoadingButton as component and using it with href and target
Nobody has claimed this yet.
- 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://codesandbox.io/p/sandbox/listitembutton-loadingbutton-repro-4mxwg5?file=%2Fsrc%2FDemo.tsx%3A9%2C41
Steps:
1.Open Demo.tsx and hover lines from 19 to 26 to see the error. The error is about the use of the target prop, which should be allowed when using href.
Current behavior
TypeScript complains about target not existing on type 'IntrinsicAttributes & { component: ExtendButton<LoadingButtonTypeMap<{}, "button">>; } & ListItemButtonOwnProps & Omit<...> & CommonProps & Omit<...>' if I pass LoadingButton to the component prop, along with href and target.
It still works fine, with a click opening the link in new tab if target="_blank", it's just TypeScript complaining.
Expected behavior
target should be supported as passing href results in the button using a as the root node
Context
I want to take advantage of the loading prop of LoadingButton, so it spins while the client is retrieving the href url.
Your environment
npx @mui/envinfo
System:
OS: macOS 14.2.1
Binaries:
Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
pnpm: Not Found
Browsers:
Chrome: Not Found
Edge: 122.0.2365.80
Safari: 17.2.1
npmPackages:
@emotion/react: 11.11.4 => 11.11.4
@emotion/styled: 11.11.0 => 11.11.0
@mui/base: 5.0.0-beta.38
@mui/core-downloads-tracker: 5.15.12
@mui/icons-material: 5.15.12 => 5.15.12
@mui/lab: 5.0.0-alpha.167 => 5.0.0-alpha.167
@mui/material: 5.15.12 => 5.15.12
@mui/private-theming: 5.15.12
@mui/styled-engine: 5.15.11
@mui/system: 5.15.12 => 5.15.12
@mui/types: 7.2.13
@mui/utils: 5.15.12
@mui/x-data-grid: 6.19.6 => 6.19.6
@mui/x-date-pickers: 6.19.6 => 6.19.6
@types/react: 18.2.63 => 18.2.63
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
typescript: 5.4.2 => 5.4.2
Search keywords: ListItemButton, LoadingButton, Button, target, component prop
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.