Merge pull request #122 from chakra-ui/fix/modal-focus-lock

fix: rewrite logic for modal focus lock

Author: codebender828

.changeset/gorgeous-tables-mate.md

@@ -0,0 +1,37 @@
+---
+"@chakra-ui/c-accordion": patch
+"@chakra-ui/c-alert": patch
+"@chakra-ui/c-breadcrumb": patch
+"@chakra-ui/c-button": patch
+"@chakra-ui/c-close-button": patch
+"@chakra-ui/c-code": patch
+"@chakra-ui/c-color-mode": patch
+"@chakra-ui/c-flex": patch
+"@chakra-ui/c-focus-lock": patch
+"@chakra-ui/c-form-control": patch
+"@chakra-ui/c-icon": patch
+"@chakra-ui/c-input": patch
+"@chakra-ui/c-modal": patch
+"@chakra-ui/c-motion": patch
+"@chakra-ui/c-popper": patch
+"@chakra-ui/c-portal": patch
+"@chakra-ui/c-reset": patch
+"@chakra-ui/c-scroll-lock": patch
+"@chakra-ui/c-spinner": patch
+"@chakra-ui/c-theme-provider": patch
+"@chakra-ui/c-visually-hidden": patch
+"@chakra-ui/vue-next": patch
+"@chakra-ui/vue-layout": patch
+"@chakra-ui/nuxt-next": patch
+"@chakra-ui/vue-system": patch
+"@chakra-ui/vue-test-utils": patch
+"@chakra-ui/vue-theme": patch
+"@chakra-ui/vue-theme-tools": patch
+"@chakra-ui/vue-utils": patch
+"@chakra-ui/vue-a11y": patch
+"@chakra-ui/vue-composables": patch
+"@chakra-ui/vue-auto-import": patch
+"@chakra-ui/vue-docs": patch
+---
+
+Rewrite focus trap logic

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/package.json

@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "@chakra-ui/utils": "^1.9.1",
+    "@chakra-ui/vue-composables": "0.1.0-alpha.7",
     "@chakra-ui/vue-system": "0.1.0-alpha.8",
     "@chakra-ui/vue-utils": "0.1.0-alpha.8",
     "focus-trap": "^6.3.0"