material-ui
material-ui copied to clipboard
[ListItemButton] Typescript error when passing Button or LoadingButton as component and using it with href and target
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
@mj12albert & @federico-ntr I have added a fix for the above issue. @mj12albert Please review the PR. Thanks!