perf(Editable): track pointerdown only in editing mode (#1945)

J-Michalek · Jakub · zernonia · web-flow · commit 4615460e93c2 · 2025-05-27T22:52:48.000+08:00
* perf(editable): track pointerdown only in editing mode

* chore(dismissable-layer): remove overlooked console.log

* fix: editable requires double click to dismiss

---------

Co-authored-by: Jakub &lt;jakub.michalek@freelo.io&gt;
Co-authored-by: zernonia &lt;zernonia@gmail.com&gt;
diff --git a/packages/core/src/DismissableLayer/utils.ts b/packages/core/src/DismissableLayer/utils.ts
@@ -1,6 +1,6 @@
-import type { Ref } from 'vue'
+import type { MaybeRefOrGetter, Ref } from 'vue'
 import { isClient } from '@vueuse/shared'
-import { nextTick, ref, watchEffect } from 'vue'
+import { nextTick, ref, toValue, watchEffect } from 'vue'
 import { handleAndDispatchCustomEvent } from '@/shared'
 
 export type PointerDownOutsideEvent = CustomEvent<{
@@ -45,6 +45,7 @@ function isLayerExist(layerElement: HTMLElement, targetElement: HTMLElement) {
 export function usePointerDownOutside(
   onPointerDownOutside?: (event: PointerDownOutsideEvent) => void,
   element?: Ref<HTMLElement | undefined>,
+  enabled: MaybeRefOrGetter<boolean> = true,
 ) {
   const ownerDocument: Document
     = element?.value?.ownerDocument ?? globalThis?.document
@@ -53,7 +54,7 @@ export function usePointerDownOutside(
   const handleClickRef = ref(() => {})
 
   watchEffect((cleanupFn) => {
-    if (!isClient)
+    if (!isClient || !toValue(enabled))
       return
     const handlePointerDown = async (event: PointerEvent) => {
       const target = event.target as HTMLElement | undefined
@@ -132,7 +133,11 @@ export function usePointerDownOutside(
   })
 
   return {
-    onPointerDownCapture: () => (isPointerInsideDOMTree.value = true),
+    onPointerDownCapture: () => {
+      if (!toValue(enabled))
+        return
+      isPointerInsideDOMTree.value = true
+    },
   }
 }
 
diff --git a/packages/core/src/Editable/EditableRoot.vue b/packages/core/src/Editable/EditableRoot.vue
@@ -180,7 +180,7 @@ function handleDismiss() {
   }
 }
 
-const pointerDownOutside = usePointerDownOutside(() => handleDismiss(), currentElement)
+const pointerDownOutside = usePointerDownOutside(() => handleDismiss(), currentElement, isEditing)
 const focusOutside = useFocusOutside(() => handleDismiss(), currentElement)
 const isEmpty = computed(() => modelValue.value === '')
 

Original file line number	Diff line number	Diff line change
`@@ -180,7 +180,7 @@ function handleDismiss() {`
`180`	`180`	`}`
`181`	`181`	`}`
`182`	`182`
`183`		`-const pointerDownOutside = usePointerDownOutside(() => handleDismiss(), currentElement)`
	`183`	`+const pointerDownOutside = usePointerDownOutside(() => handleDismiss(), currentElement, isEditing)`
`184`	`184`	`const focusOutside = useFocusOutside(() => handleDismiss(), currentElement)`
`185`	`185`	`const isEmpty = computed(() => modelValue.value === '')`
`186`	`186`