fix: useHover always returns currentTarget (#2428)

* fix: useHover always returns currentTarget

fix #2355

* add a test and use the standard target name

* fix lint

Co-authored-by: Rob Snow <[email protected]>

Author: cedeber

packages/@react-aria/interactions/src/useHover.ts

@@ -109,7 +109,7 @@ export function useHover(props: HoverProps): HoverResult {
       }
 
       state.isHovered = true;
-      let target = event.target;
+      let target = event.currentTarget;
       state.target = target;
 
       if (onHoverStart) {
@@ -136,7 +136,7 @@ export function useHover(props: HoverProps): HoverResult {
       }
 
       state.isHovered = false;
-      let target = event.target;
+      let target = event.currentTarget;
       if (onHoverEnd) {
         onHoverEnd({
           type: 'hoverend',
@@ -194,7 +194,7 @@ export function useHover(props: HoverProps): HoverResult {
     // Call the triggerHoverEnd as soon as isDisabled changes to true
     // Safe to call triggerHoverEnd, it will early return if we aren't currently hovering
     if (isDisabled) {
-      triggerHoverEnd({target: state.target}, state.pointerType);
+      triggerHoverEnd({currentTarget: state.target}, state.pointerType);
     }
   }, [isDisabled]);
 

packages/@react-aria/interactions/test/useHover.test.js

@@ -22,7 +22,7 @@ import {useHover} from '../';
 
 function Example(props) {
   let {hoverProps, isHovered} = useHover(props);
-  return <div {...hoverProps}>test{isHovered && '-hovered'}</div>;
+  return <div {...hoverProps}>test{isHovered && '-hovered'}<div data-testid="inner-target" /></div>;
 }
 
 function pointerEvent(type, opts) {
@@ -98,6 +98,43 @@ describe('useHover', function () {
       ]);
     });
 
+    it('hover event target should be the same element we attached listeners to even if we hover over inner elements', function () {
+      let events = [];
+      let addEvent = (e) => events.push(e);
+      let res = render(
+        <Example
+          onHoverStart={addEvent}
+          onHoverEnd={addEvent}
+          onHoverChange={isHovering => addEvent({type: 'hoverchange', isHovering})} />
+      );
+
+      let el = res.getByText('test');
+      let inner = res.getByTestId('inner-target');
+      fireEvent(inner, pointerEvent('pointerover', {pointerType: 'mouse'}));
+      fireEvent(inner, pointerEvent('pointerout', {pointerType: 'mouse'}));
+
+      expect(events).toEqual([
+        {
+          type: 'hoverstart',
+          target: el,
+          pointerType: 'mouse'
+        },
+        {
+          type: 'hoverchange',
+          isHovering: true
+        },
+        {
+          type: 'hoverend',
+          target: el,
+          pointerType: 'mouse'
+        },
+        {
+          type: 'hoverchange',
+          isHovering: false
+        }
+      ]);
+    });
+
     it('should not fire hover events when pointerType is touch', function () {
       let events = [];
       let addEvent = (e) => events.push(e);