Material-ui: Allow onMouseEnter/onMouseLeave, (and others?) handlers for ListItem without 'button' prop

[mcabs3]

I don't see any previous issues or comments about this in the project. But is there a reason why I am unable to use onMouseEnter/onMouseLeave on a ListItem in typescript without the button prop applied? I understand that the button prop designates whether to use a li or a button but I should still be able to use the various handlers?

• [X ] The issue is present in the latest release.
• [ X] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

<ListItem onMouseEnter={someHandler} /> provides a TS error that button is required

Expected Behavior 🤔

<ListItem onMouseEnter={someHandler} /> should be acceptable

Context 🔦

I am initially trying to use this to track hovering on an element in JS so I may do some logic (no styling or anything related to that).

[cjoecker]

@oliviertassinari I think I can implement this

[eps1lon]

This is already working:

// verify that https://github.com/mui-org/material-ui/issues/19756 already worked.
function MouseEnterTest() {
  function handleMouseEnter(event: React.MouseEvent<HTMLLIElement>) {}
  <ListItem onMouseEnter={handleMouseEnter} />;
}

someHandler is probably expecting a slightly different MouseEvent target.

[support[bot]]

👋 Thanks for using Material-UI!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://material-ui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[mcabs3]

You are correct, I had a different handler type.