Inconsistent hover events on sp-button

Attaching onMouseEnter and onMouseLeave events on sp-button, events fire twice on enter and twice on leave and also re-fire when hovering over text inside the button.

Example code attached:

        onClick={(e) => {
        onMouseEnter={(e) => {
          console.log("mouse enter")
        onMouseLeave={(e) => {
          console.log("mouse leave")

Just tested it and I can confirm this.
event.preventDefault() doesn’t work either, not even when you wrap it inside a div. (Then the event fires once for the div and twice for the sp-button, although the sp-button does not even have a listener attached).

Possible workarounds:

  • Wrap it in a div, store a reference to the div and then compare it with the
  • Debounce your event handler

Also seems to fire twice for regular div

        onMouseEnter={() => {
          console.log("Div onMouseEnter")
        onMouseLeave={() => {
          console.log("Div onMouseLeave")

Indeed, but when an sp-button is inside the div it only fires once, weirdly enough :smiley:
Debouncing or throtteling should work without problems though…

Seems to work with loadash debounce and setting options to { trailing: false, leading: true }