Merge pull request #1157 from framer/fix/hover-supression

Remove hover event supression during layout measurements

CHANGELOG.md

@@ -6,7 +6,8 @@ Framer Motion adheres to [Semantic Versioning](http://semver.org/).
 
 ### Fixed
 
--   Fixing SVG gradientTransform
+-   Fixing SVG `gradientTransform`.
+-   Removing hover event suspension during layout measurements.
 
 ## [4.1.16] 2021-05-12
 

package.json

@@ -146,7 +146,7 @@
         },
         {
             "path": "./dist/size-rollup-dom-max.js",
-            "maxSize": "22.3 kB"
+            "maxSize": "22.5 kB"
         },
         {
             "path": "./dist/size-webpack-m.js",

src/gestures/use-hover-gesture.ts

@@ -5,21 +5,14 @@ import { usePointerEvent } from "../events/use-pointer-event"
 import { VisualElement } from "../render/types"
 import { FeatureProps } from "../motion/features/types"
 import { isDragActive } from "./drag/utils/lock"
-import { layoutState } from "../render/dom/utils/batch-layout"
 
 function createHoverEvent(
     visualElement: VisualElement,
     isActive: boolean,
     callback?: (event: MouseEvent, info: EventInfo) => void
 ) {
     return (event: MouseEvent, info: EventInfo) => {
-        if (
-            !isMouseEvent(event) ||
-            layoutState.isMeasuringLayout ||
-            isDragActive()
-        ) {
-            return
-        }
+        if (!isMouseEvent(event) || isDragActive()) return
 
         callback?.(event, info)
         visualElement.animationState?.setActive(AnimationType.Hover, isActive)

src/render/dom/utils/batch-layout.ts

@@ -1,5 +1,3 @@
-import sync from "framesync"
-
 type Job = () => void
 
 type JobSetter = (job: Job) => void
@@ -8,10 +6,6 @@ type ReadWrites = (read: JobSetter, write: JobSetter) => void
 
 const unresolvedJobs = new Set<ReadWrites>()
 
-export const layoutState = {
-    isMeasuringLayout: false,
-}
-
 function pushJob(stack: Job[][], job: Job, pointer: number) {
     if (!stack[pointer]) stack[pointer] = []
     stack[pointer].push(job)
@@ -45,25 +39,6 @@ export function flushLayout() {
 
     unresolvedJobs.clear()
 
-    /**
-     * Mark that we're currently measuring layouts. This allows us to, for instance, ignore
-     * hover events that might be triggered as a result of resetting transforms.
-     *
-     * The postRender/setTimeout combo seems like an odd bit of scheduling but what it's saying
-     * is *after* the next render, wait 10ms before re-enabling hover events. Waiting until the
-     * next frame completely will result in missed, valid hover events. But events seem to
-     * be fired async from their actual action, so setting this to false too soon can still
-     * trigger events from layout measurements.
-     *
-     * Note: If we figure out a way of measuring layout while transforms remain applied, this can be removed.
-     * I have attempted unregistering event listeners and setting CSS to pointer-events: none
-     * but neither seem to work as expected.
-     */
-    layoutState.isMeasuringLayout = true
-    sync.postRender(() => {
-        setTimeout(() => (layoutState.isMeasuringLayout = false), 10)
-    })
-
     /**
      * Execute jobs
      */