IconButton with onClick typescript issues

[lookfirst]

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

No warnings in my IDE. I don't need to add the href= attribute because my onClick handler deals with things for me.

Current Behavior 😯

Catch 22 error. If I don't have href, I get a warning about not having href. If I have href, then I get an error. I suspect I'm doing something stupid.

Steps to Reproduce 🕹

<IconButton edge="end" aria-label="Delete" onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => handleDelete(event)}>
    <DeleteIcon />
</IconButton>

Context 🔦

Error after adding href={''}

Your Environment 🌎

Tech	Version
Material-UI	v4.1.1
React	v16.8.20
Browser	Chrome latest
TypeScript	3.5.2
Intellij	2019.2 EAP latest

[support]

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

[eps1lon]

If you add an href you will render an anchor not a button i.e. HTMLButtonElement wont be true at runtime. You should use HTMLAnchorElement.

[lookfirst]

I think you're missing the point though. Without the href=, the IDE gives a warning that it is missing. This is something wrong with the type definitions. href isn't a required attribute.

[eps1lon]

Without the href=, the IDE gives a warning that it is missing.

As with #16328 we don't offer support for every IDE setup. The actual build error after you added the href attribute is expected.

[chrisparton1991]

@eps1lon This looks like an issue with the type definitions. IconButton extends from ExtendButtonBase, which has { href: string } as its prop type.

Should the prop type be { href?: string }?. I'm not sure what the repercussions of this change would be, but making href optional fixes the warning and seems sensible to me.

[rob-glas]

Looks like this still has not been addressed.

[oliviertassinari]

@rob-glas Do you have a reproduction with v5-alpha.8?

[xuhdev]

I can still reproduce this. While the generated page uses a button element, the typescript compiler insists that the element is HTMLAnchorElement.

[xuhdev]

OK, I found that I misplaced a variant field to IconButton. After removing variant, it works now.