[ListItemButton] Typescript error when passing Button or LoadingButton as component and using it with href and target #41452
Labels
bug 🐛
Something doesn't work
component: list
This is the name of the generic UI component, not the React module!
package: material-ui
Specific to @mui/material
typescript
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 thetarget
prop, which should be allowed when usinghref
.Current behavior
TypeScript complains about
target
not existing on type'IntrinsicAttributes & { component: ExtendButton<LoadingButtonTypeMap<{}, "button">>; } & ListItemButtonOwnProps & Omit<...> & CommonProps & Omit<...>'
if I passLoadingButton
to thecomponent
prop, along withhref
andtarget
.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 passinghref
results in the button usinga
as the root nodeContext
I want to take advantage of the
loading
prop ofLoadingButton
, so it spins while the client is retrieving the href url.Your environment
npx @mui/envinfo
Search keywords: ListItemButton, LoadingButton, Button, target, component prop
The text was updated successfully, but these errors were encountered: