fix: set relatedTarget when the pointer moves between elements

src/system/pointer/mouse.ts

@@ -89,14 +89,23 @@ export class Mouse {
     return {
       leave: () => {
         if (prevTarget !== nextTarget) {
-          instance.dispatchUIEvent(prevTarget, 'mouseout', init)
-          leave.forEach(el => instance.dispatchUIEvent(el, 'mouseleave', init))
+          const leaveInit = {...init, relatedTarget: nextTarget}
+          instance.dispatchUIEvent(prevTarget, 'mouseout', leaveInit)
+          leave.forEach(el =>
+            instance.dispatchUIEvent(el, 'mouseleave', leaveInit),
+          )
         }
       },
       enter: () => {
         if (prevTarget !== nextTarget) {
-          instance.dispatchUIEvent(nextTarget, 'mouseover', init)
-          enter.forEach(el => instance.dispatchUIEvent(el, 'mouseenter', init))
+          const enterInit = {
+            ...init,
+            relatedTarget: prevTarget.isConnected ? prevTarget : null,
+          }
+          instance.dispatchUIEvent(nextTarget, 'mouseover', enterInit)
+          enter.forEach(el =>
+            instance.dispatchUIEvent(el, 'mouseenter', enterInit),
+          )
         }
       },
       move: () => {

src/system/pointer/pointer.ts

@@ -65,9 +65,10 @@ export class Pointer {
       leave: () => {
         if (hasPointerEvents(instance, prevTarget)) {
           if (prevTarget !== nextTarget) {
-            instance.dispatchUIEvent(prevTarget, 'pointerout', init)
+            const leaveInit = {...init, relatedTarget: nextTarget}
+            instance.dispatchUIEvent(prevTarget, 'pointerout', leaveInit)
             leave.forEach(el =>
-              instance.dispatchUIEvent(el, 'pointerleave', init),
+              instance.dispatchUIEvent(el, 'pointerleave', leaveInit),
             )
           }
         }
@@ -76,9 +77,13 @@ export class Pointer {
         assertPointerEvents(instance, nextTarget)
 
         if (prevTarget !== nextTarget) {
-          instance.dispatchUIEvent(nextTarget, 'pointerover', init)
+          const enterInit = {
+            ...init,
+            relatedTarget: prevTarget.isConnected ? prevTarget : null,
+          }
+          instance.dispatchUIEvent(nextTarget, 'pointerover', enterInit)
           enter.forEach(el =>
-            instance.dispatchUIEvent(el, 'pointerenter', init),
+            instance.dispatchUIEvent(el, 'pointerenter', enterInit),
           )
         }
       },

tests/convenience/hover.ts

@@ -15,6 +15,8 @@ describe.each([
     for (const type of events) {
       expect(getEvents(`pointer${type}`)).toHaveLength(1)
       expect(getEvents(`mouse${type}`)).toHaveLength(1)
+      expect(getEvents(`pointer${type}`)[0].relatedTarget).toBe(document.body)
+      expect(getEvents(`mouse${type}`)[0].relatedTarget).toBe(document.body)
     }
   })
 

tests/pointer/move.ts

@@ -70,6 +70,36 @@ test('hover inside element', async () => {
   `)
 })
 
+test('set relatedTarget when moving between elements', async () => {
+  const {elements, getEvents, clearEventCalls, user} = setup(`<a></a><p></p>`)
+
+  await user.pointer({target: elements[0]})
+  clearEventCalls()
+  await user.pointer({target: elements[1]})
+
+  for (const type of ['pointer', 'mouse'] as const) {
+    expect(getEvents(`${type}out`)[0].relatedTarget).toBe(elements[1])
+    expect(getEvents(`${type}leave`)[0].relatedTarget).toBe(elements[1])
+    expect(getEvents(`${type}over`)[0].relatedTarget).toBe(elements[0])
+    expect(getEvents(`${type}enter`)[0].relatedTarget).toBe(elements[0])
+  }
+})
+
+test('set relatedTarget to null when the previous element was removed', async () => {
+  const {elements, getEvents, clearEventCalls, user} = setup(`<a></a><p></p>`)
+  const [a, p] = Array.from(elements)
+
+  await user.pointer({target: a})
+  a.remove()
+  clearEventCalls()
+  await user.pointer({target: p})
+
+  for (const type of ['pointer', 'mouse'] as const) {
+    expect(getEvents(`${type}over`)[0].relatedTarget).toBe(null)
+    expect(getEvents(`${type}enter`)[0].relatedTarget).toBe(null)
+  }
+})
+
 test('move touch over elements', async () => {
   const {element, getEventSnapshot, user} = setup(`<div><a></a><p></p></div>`)
 

tests/react/index.tsx

@@ -223,3 +223,50 @@ test('change select with delayed state update', async () => {
     expect(screen.getByRole('listbox')).toHaveValue(['Chrome', 'Firefox'])
   })
 })
+
+test('click a child that is only rendered while its parent is hovered', async () => {
+  const onClick = mocks.fn()
+  const onMouseLeave = mocks.fn()
+
+  function Card() {
+    const [hovered, setHovered] = useState(false)
+    const handleLeave = () => {
+      onMouseLeave()
+      setHovered(false)
+    }
+
+    return (
+      <div onMouseEnter={() => setHovered(true)} onMouseLeave={handleLeave}>
+        Card
+        {hovered && <button onClick={onClick}>Edit</button>}
+      </div>
+    )
+  }
+
+  render(<Card />)
+  const user = userEvent.setup()
+
+  await user.hover(screen.getByText('Card'))
+  await user.click(screen.getByRole('button'))
+
+  expect(onMouseLeave).not.toHaveBeenCalled()
+  expect(onClick).toHaveBeenCalledTimes(1)
+  expect(screen.getByRole('button')).toBeInTheDocument()
+})
+
+test('call onMouseEnter after the previous hover target was removed', async () => {
+  const onMouseEnter = mocks.fn()
+  render(
+    <div>
+      <span>a</span>
+      <span onMouseEnter={onMouseEnter}>b</span>
+    </div>,
+  )
+  const user = userEvent.setup()
+
+  await user.hover(screen.getByText('a'))
+  screen.getByText('a').remove()
+  await user.hover(screen.getByText('b'))
+
+  expect(onMouseEnter).toHaveBeenCalledTimes(1)
+})