Merge pull request #2472 from framer/fix/filter-touch-hover

Filter touch events from hover

CHANGELOG.md

@@ -4,6 +4,12 @@ Framer Motion adheres to [Semantic Versioning](http://semver.org/).
 
 Undocumented APIs should be considered internal and may change without warning.
 
+## [10.17.7] 2024-02-05
+
+### Fixed
+
+- Fix touch event filtering for hover gesture.
+
 ## [10.17.6] 2024-02-04
 
 ### Fixed

packages/framer-motion/jest.setup.tsx

@@ -8,7 +8,7 @@ import * as React from "react"
 /**
  * Stub PointerEvent - this is so we can pass through PointerEvent.isPrimary
  */
-const pointerEventProps = ["isPrimary"]
+const pointerEventProps = ["isPrimary", "pointerType", "button"]
 class PointerEventFake extends Event {
  constructor(type: any, props: any) {
  super(type, props)
@@ -39,19 +39,27 @@ export const click = (element: Element) =>
  act(() => {
  fireEvent.click(element)
  })
-export const pointerEnter = (element: Element) =>
+export const pointerEnter = (element: Element, options?: any) =>
  act(() => {
  fireEvent.pointerEnter(
  element,
  // Emulate buttonless pointer event for enter/leave
- new PointerEventFake("pointerenter", { type: "mouse", button: -1 })
+ new PointerEventFake("pointerenter", {
+ pointerType: "mouse",
+ button: -1,
+ ...options,
+ })
  )
  })
-export const pointerLeave = (element: Element) =>
+export const pointerLeave = (element: Element, options?: any) =>
  act(() => {
  fireEvent.pointerLeave(
  element,
- new PointerEventFake("pointerleave", { type: "mouse", button: -1 })
+ new PointerEventFake("pointerleave", {
+ pointerType: "mouse",
+ button: -1,
+ ...options,
+ })
  )
  })
 export const pointerDown = (element: Element) =>

packages/framer-motion/src/gestures/__tests__/hover.test.tsx

@@ -31,6 +31,26 @@ describe("hover", () => {
  })
  })
 
+ test("filters touch events", async () => {
+ const hoverIn = jest.fn()
+ const hoverOut = jest.fn()
+ const Component = () => (
+ <motion.div onHoverStart={hoverIn} onHoverEnd={hoverOut} />
+ )
+
+ const { container } = render(<Component />)
+ pointerEnter(container.firstChild as Element, { pointerType: "touch" })
+ pointerLeave(container.firstChild as Element, { pointerType: "touch" })
+
+ return new Promise<void>((resolve) => {
+ frame.render(() => {
+ expect(hoverIn).toBeCalledTimes(0)
+ expect(hoverOut).toBeCalledTimes(0)
+ resolve()
+ })
+ })
+ })
+
  test("whileHover applied", async () => {
  const promise = new Promise((resolve) => {
  const opacity = motionValue(1)

packages/framer-motion/src/gestures/hover.ts

@@ -11,7 +11,7 @@ function addHoverEvent(node: VisualElement<Element>, isActive: boolean) {
  const callbackName = "onHover" + (isActive ? "Start" : "End")
 
  const handleEvent = (event: PointerEvent, info: EventInfo) => {
- if (event.type === "touch" || isDragActive()) return
+ if (event.pointerType === "touch" || isDragActive()) return
 
  const props = node.getProps()