fix: update focus trap

Author: codebender828

packages/c-focus-lock/examples/with-focus-lock-component.vue

@@ -11,11 +11,7 @@
           rounded="lg"
           border-color="gray.400"
           d="inline-block"
-          @activate="handleActivate"
-          @deactivate="handleDeactivate"
-          :allow-outside-click="false"
-          :initial-focus-ref="() => initialFocusRef"
-          #default="{ hasFocus, deactivate }"
+          #default="{ enabled, deactivate }"
           pos="relative"
           v-if="isActive"
         >
@@ -26,7 +22,7 @@
               right="10px"
               @click="deactivate"
             ></c-close-button>
-            <chakra.pre> Focus trap enabled: {{ hasFocus }} </chakra.pre>
+            <chakra.pre> Focus trap enabled: {{ enabled }} </chakra.pre>
             <chakra.p mb="2">Inside focus trap</chakra.p>
             <c-button color-scheme="teal"> Login </c-button>
             <c-button :ref="initialFocus" color-scheme="yellow" mx="2"
@@ -35,28 +31,28 @@
             <c-button left-icon="user" color-scheme="red"
               >Delete account</c-button
             >
-            <chakra.pre> Focus trap enabled: {{ hasFocus }} </chakra.pre>
+            <chakra.pre> Focus trap enabled: {{ enabled }} </chakra.pre>
             <chakra.p mb="2">Inside focus trap</chakra.p>
             <c-button color-scheme="teal"> Login </c-button>
             <c-button color-scheme="yellow" mx="2">Initial focus!</c-button>
             <c-button left-icon="user" color-scheme="red"
               >Delete account</c-button
             >
-            <chakra.pre> Focus trap enabled: {{ hasFocus }} </chakra.pre>
+            <chakra.pre> Focus trap enabled: {{ enabled }} </chakra.pre>
             <chakra.p mb="2">Inside focus trap</chakra.p>
             <c-button color-scheme="teal"> Login </c-button>
             <c-button color-scheme="yellow" mx="2">Initial focus!</c-button>
             <c-button left-icon="user" color-scheme="red"
               >Delete account</c-button
             >
-            <chakra.pre> Focus trap enabled: {{ hasFocus }} </chakra.pre>
+            <chakra.pre> Focus trap enabled: {{ enabled }} </chakra.pre>
             <chakra.p mb="2">Inside focus trap</chakra.p>
             <c-button color-scheme="teal"> Login </c-button>
             <c-button color-scheme="yellow" mx="2">Initial focus!</c-button>
             <c-button left-icon="user" color-scheme="red"
               >Delete account</c-button
             >
-            <chakra.pre> Focus trap enabled: {{ hasFocus }} </chakra.pre>
+            <chakra.pre> Focus trap enabled: {{ enabled }} </chakra.pre>
             <chakra.p mb="2">Inside focus trap</chakra.p>
             <c-button color-scheme="teal"> Login </c-button>
             <c-button color-scheme="yellow" mx="2">Initial focus!</c-button>
@@ -90,56 +86,33 @@
   </chakra.div>
 </template>
 
-<script lang="ts">
-import { useRef } from '@chakra-ui/vue-utils'
-import { defineComponent, ref, watch } from 'vue'
-import { CFocusLock } from '../src/c-focus-lock'
+<script lang="ts" setup>
+import { chakra } from "@chakra-ui/vue-next"
+import { useRef } from "@chakra-ui/vue-utils"
+import { ref } from "vue"
+import { CFocusLock } from "../src/c-focus-lock"
 
-if (!document.getElementById('new-target')) {
-  const target = document.createElement('div')
-  target.style.display = 'inline-block'
-  target.style.position = 'absolute'
-  target.style.top = '50px'
-  target.style.left = '250px'
+if (!document.getElementById("new-target")) {
+  const target = document.createElement("div")
+  target.style.display = "inline-block"
+  target.style.position = "absolute"
+  target.style.top = "50px"
+  target.style.left = "250px"
 
-  target.id = 'new-target'
+  target.id = "new-target"
   document.body.appendChild(target)
 }
+const isActive = ref(false)
+const [finalFocus, finalFocusRef] = useRef()
+const [initialFocus, initialFocusRef] = useRef()
 
-export default defineComponent({
-  components: {
-    CFocusLock,
-  },
-  setup() {
-    const isActive = ref(false)
-    const [finalFocus, finalFocusRef] = useRef()
-    const [initialFocus, initialFocusRef] = useRef()
-
-    const handleActivate = () => {
-      console.log('focuslock activated')
-    }
-
-    const handleDeactivate = () => {
-      console.log('focuslock deactivated')
-      isActive.value = false
-      setTimeout(() => {})
-    }
-
-    watch(isActive, () => {
-      setTimeout(() => {
-        isActive.value = !isActive.value
-      }, 3000)
-    })
+const handleActivate = () => {
+  console.log("focuslock activated")
+}
 
-    return {
-      isActive,
-      handleActivate,
-      handleDeactivate,
-      finalFocus,
-      finalFocusRef,
-      initialFocus,
-      initialFocusRef,
-    }
-  },
-})
+const handleDeactivate = () => {
+  console.log("focuslock deactivated")
+  isActive.value = false
+  setTimeout(() => {})
+}
 </script>

packages/c-focus-lock/examples/with-focus-lock-hook.vue

@@ -7,7 +7,7 @@
     <c-portal to="#new-target">
       <c-motion type="fade">
         <chakra.div
-          :ref="lock"
+          ref="_target"
           p="4"
           border="4px dashed"
           rounded="lg"
@@ -24,9 +24,7 @@
           ></c-close-button>
           <chakra.p mb="2">Inside focus trap</chakra.p>
           <c-button color-scheme="teal"> Login </c-button>
-          <c-button color-scheme="yellow" :ref="initialFocus" mx="2"
-            >Initial focus!</c-button
-          >
+          <c-button color-scheme="yellow" mx="2">Initial focus!</c-button>
           <c-button left-icon="user" color-scheme="red"
             >Delete account</c-button
           >
@@ -49,15 +47,16 @@
       <c-button @click="activate" ml="3" color-scheme="blue">Enable</c-button>
     </chakra.div>
     <chakra.pre font-weight="bold">
-      Focus lock enabled: {{ hasFocus }}
+      Focus lock enabled: {{ isLocked }}
     </chakra.pre>
   </chakra.div>
 </template>
 
 <script setup lang="ts">
 import { chakra } from "@chakra-ui/vue-next"
-import { useFocusLock } from "../src/use-focus-lock"
-import { ref } from "vue"
+import { ref, watch, watchEffect } from "vue"
+import { useFocusTrap } from "../src/use-focus-trap"
+import { unrefElement } from "@chakra-ui/vue-utils"
 
 const isLocked = ref(false)
 
@@ -72,26 +71,32 @@ if (!document.getElementById("new-target")) {
   document.body.appendChild(target)
 }
 
-const {
-  hasFocus,
-  lock,
-  activate: lockactivate,
-  deactivate: lockdeactivate,
-  initialFocus,
-} = useFocusLock({
-  escapeDeactivates: false,
-  delayInitialFocus: true,
-  immediate: true,
-})
+const _target = ref()
+const containers = ref<Set<HTMLElement>>(new Set())
+
+watchEffect(
+  (onInvalidate) => {
+    let el: HTMLElement
+    if (_target.value) {
+      el = unrefElement(_target)
+      containers.value.add(el)
+    }
+
+    console.log("Adding containers", containers.value)
+
+    onInvalidate(() => {
+      containers.value.delete(el)
+    })
+  },
+  { flush: "post" }
+)
+useFocusTrap(containers, ref(true))
 
 const activate = async () => {
   isLocked.value = true
-  // setTimeout(lockactivate)
-  setTimeout(lockactivate)
 }
 
 const deactivate = () => {
-  lockdeactivate()
   isLocked.value = false
 }
 </script>

packages/c-focus-lock/src/c-focus-lock.ts renamed to packages/c-focus-lock/src/c-focus-lock.tsx

@@ -14,7 +14,18 @@
  * and my suspicion is that it is happening inside the library
  */
 
-import { defineComponent, PropType, computed, cloneVNode, VNode } from "vue"
+import {
+  defineComponent,
+  PropType,
+  computed,
+  cloneVNode,
+  VNode,
+  ref,
+  unref,
+  h,
+  watchEffect,
+  onUnmounted,
+} from "vue"
 import {
   focus,
   FocusableElement,
@@ -25,6 +36,13 @@ import {
 import { useFocusLock } from "./use-focus-lock"
 import type { UseFocusLockOptions } from "./use-focus-lock"
 import type { FocusTarget } from "focus-trap"
+import { useFocusTrap, useReturnFocusSelector } from "./use-focus-trap"
+import {
+  MaybeElementRef,
+  unrefElement,
+  VueComponentInstance,
+} from "@chakra-ui/vue-utils"
+import { chakra } from '@chakra-ui/vue-system'
 
 type RefProp =
   | (() => HTMLElement | string | object | undefined | unknown)
@@ -78,46 +96,61 @@ export const CFocusLock = defineComponent({
     },
   },
   setup(props, { attrs, slots, emit }) {
-    const finalFocusElement = computed(() => {
-      let finalFocus
-      if (props.finalFocusRef) {
-        const finalFocusRef = isFunction(props.finalFocusRef)
-          ? props.finalFocusRef?.()
-          : props.finalFocusRef
-        if (typeof finalFocusRef === "string") {
-          finalFocus = document.querySelector<FocusableElement & Element>(
-            finalFocusRef
+    const target = ref<HTMLElement | VueComponentInstance>()
+    const initialFocusElement = computed<HTMLElement>(() => {
+      let initialFocus
+      if (props.initialFocusRef) {
+        let resolvedInitialFocusRef: MaybeElementRef =
+          typeof props.initialFocusRef === "function"
+            ? props.initialFocusRef()
+            : props.initialFocusRef
+
+        resolvedInitialFocusRef = unref(resolvedInitialFocusRef)
+        if (typeof resolvedInitialFocusRef === "string") {
+          initialFocus = document.querySelector<FocusableElement & Element>(
+            resolvedInitialFocusRef
           )
         } else {
-          // @ts-expect-error
-          finalFocus = finalFocusRef?.$el || finalFocusRef
+          initialFocus = resolvedInitialFocusRef?.$el || resolvedInitialFocusRef
         }
       }
-      return finalFocus
+      return initialFocus
     })
 
-    /**
-     * Basic state for focus lock component.
-     */
-    const { lock } = useFocusLock({
-      ...props,
-      onActivate() {
-        emit("activate")
-      },
-      onDeactivate() {
-        setTimeout(() => {
-          emit("deactivate")
-          if (finalFocusElement.value) {
-            focus(finalFocusElement.value)
-          }
+    const enabled = ref(true)
+    function activate() {
+      enabled.value = true
+    }
+    function deactivate() {
+      enabled.value = false
+    }
+    const hasFocus = computed(() => enabled.value === true)
+
+    const containers = ref<Set<HTMLElement>>(new Set())
+    watchEffect(
+      (onInvalidate) => {
+        let el: HTMLElement
+        if (target.value) {
+          el = unrefElement(target)
+          containers.value.add(el)
+        }
+
+        onInvalidate(() => {
+          containers.value.delete(el)
         })
       },
-      initialFocus: props.initialFocusRef as FocusTarget,
-      // Should only return focus to original element
-      // when the final focus element is not set
-      returnFocusOnDeactivate: !!!finalFocusElement.value,
-      immediate: props.autoFocus,
-    })
+      { flush: "post" }
+    )
+
+    useReturnFocusSelector(enabled)
+
+    useFocusTrap(
+      containers,
+      enabled,
+      computed(() => ({
+        initialFocus: initialFocusElement.value,
+      }))
+    )
 
     return () => {
       const [firstChild] = slots.default?.({}) as VNode[]
@@ -130,11 +163,16 @@ export const CFocusLock = defineComponent({
         return
       }
 
-      return cloneVNode(firstChild, {
-        ref: lock,
+      return h(cloneVNode(firstChild, {
+        ref: target,
         ...attrs,
         "data-chakra-focus-lock": "",
-      })
+      }), {}, () => slots?.default?.({
+        enabled,
+        hasFocus,
+        activate,
+        deactivate
+      }))
     }
   },
 })