Inconsistent hover events on sp-button

Photoshop
1

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:

 <sp-button
        onClick={(e) => {
          console.log("click")
        }}
        onMouseEnter={(e) => {
          console.log("mouse enter")
        }}
        onMouseLeave={(e) => {
          console.log("mouse leave")
        }}
      >
        WTF
      </sp-button>
2

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 event.target
  • Debounce your event handler
3

Also seems to fire twice for regular div

 <div
        onMouseEnter={() => {
          console.log("Div onMouseEnter")
        }}
        onMouseLeave={() => {
          console.log("Div onMouseLeave")
        }}
      >WTF</div>
4

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…

6

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