perf(Editable): track focus only in editing mode (#1953)

J-Michalek · web-flow · commit 62a4ee7726e4 · 2025-06-06T08:50:48.000+08:00
* fix(admin-console-add-users): remove template projects for GA

* chore: lint fix
diff --git a/packages/core/src/DismissableLayer/utils.ts b/packages/core/src/DismissableLayer/utils.ts
@@ -148,13 +148,14 @@ export function usePointerDownOutside(
 export function useFocusOutside(
   onFocusOutside?: (event: FocusOutsideEvent) => void,
   element?: Ref<HTMLElement | undefined>,
+  enabled: MaybeRefOrGetter<boolean> = true,
 ) {
   const ownerDocument: Document
     = element?.value?.ownerDocument ?? globalThis?.document
 
   const isFocusInsideDOMTree = ref(false)
   watchEffect((cleanupFn) => {
-    if (!isClient)
+    if (!isClient || !toValue(enabled))
       return
     const handleFocus = async (event: FocusEvent) => {
       if (!element?.value)
@@ -182,8 +183,18 @@ export function useFocusOutside(
   })
 
   return {
-    onFocusCapture: () => (isFocusInsideDOMTree.value = true),
-    onBlurCapture: () => (isFocusInsideDOMTree.value = false),
+    onFocusCapture: () => {
+      if (!toValue(enabled))
+        return
+
+      isFocusInsideDOMTree.value = true
+    },
+    onBlurCapture: () => {
+      if (!toValue(enabled))
+        return
+
+      isFocusInsideDOMTree.value = false
+    },
   }
 }
 
diff --git a/packages/core/src/Editable/EditableRoot.vue b/packages/core/src/Editable/EditableRoot.vue
@@ -181,7 +181,8 @@ function handleDismiss() {
 }
 
 const pointerDownOutside = usePointerDownOutside(() => handleDismiss(), currentElement, isEditing)
-const focusOutside = useFocusOutside(() => handleDismiss(), currentElement)
+const focusOutside = useFocusOutside(() => handleDismiss(), currentElement, isEditing)
+
 const isEmpty = computed(() => modelValue.value === '')
 
 defineExpose({

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