chore: more preogress debugging focus lock

Author: codebender828

packages/c-focus-lock/src/c-focus-lock.ts

@@ -27,20 +27,16 @@ export interface FocusLockProps extends UseFocusLockOptions {
   /**
    * Element to which to send focus when focus trap has been deacivated
    */
-  finalFocusRef: RefProp
+  finalFocusRef?: RefProp
   /**
    * Element to which to send focus when focus trap has been activated
    */
-  initialFocusRef: RefProp
-  /**
-   * Disables focus trapping when set to `true`.
-   */
-  isActive: boolean
+  initialFocusRef?: RefProp
   /**
    * If `true`, the first focuable element within the `contentRef`
    * will be auto-focused once `CFocusLock` mounts
    */
-  autoFocus: boolean
+  autoFocus?: boolean
 }
 
 export const CFocusLock = defineComponent({
@@ -53,7 +49,6 @@ export const CFocusLock = defineComponent({
     initialFocusRef: [String, Function] as PropType<
       FocusLockProps['initialFocusRef']
     >,
-    isActive: Boolean as PropType<FocusLockProps['isActive']>,
     autoFocus: {
       type: Boolean as PropType<FocusLockProps['autoFocus']>,
       default: true,

packages/c-focus-lock/src/use-focus-lock.ts

@@ -1,5 +1,10 @@
 import { MaybeElementRef, unrefElement, useRef } from '@chakra-ui/vue-utils'
-import { AnyFunction, focus, getFirstFocusable } from '@chakra-ui/utils'
+import {
+  AnyFunction,
+  focus,
+  getAllFocusable,
+  getFirstFocusable,
+} from '@chakra-ui/utils'
 import { watch, ref, Ref, UnwrapRef, onBeforeUnmount, nextTick } from 'vue'
 import {
   ActivateOptions,
@@ -63,6 +68,11 @@ export interface UseFocusLockReturn {
    */
   initialFocus: (el: UnwrapRef<MaybeElementRef>) => void
 
+  /**
+   * Node ref of the actual content node towhich focus lock should be scoped
+   */
+  content: (el: UnwrapRef<MaybeElementRef>) => void
+
   /**
    * Node ref getter for focus lock element
    */
@@ -82,6 +92,7 @@ export function useFocusLock(
 
   const [lock, lockEl] = useRef()
   const [initialFocus, initialFocusEl] = useRef()
+  const [content, contentEl] = useRef()
 
   const { immediate, ...focusLockOptions } = options
 
@@ -107,6 +118,8 @@ export function useFocusLock(
     }
   }
 
+  watch(contentEl, (el) => console.log('contentEl', el))
+
   watch(
     lockEl,
     async (el) => {
@@ -122,7 +135,16 @@ export function useFocusLock(
           // may not yet be active. So just in case,
           // There's a fallback call here to focus the
           // element after the initial focus element is focused.
-          const initialFocus = initialFocusEl.value ?? getFirstFocusable(el)
+          let initialFocus = initialFocusEl.value ?? getFirstFocusable(el)
+          if (initialFocusEl.value) {
+            initialFocus = initialFocusEl.value
+          } else {
+            const focusables = getAllFocusable(contentEl.value || el)
+            if (focusables.length) {
+              initialFocus = focusables[0]
+              console.log(focusables)
+            }
+          }
           console.log('initialFocusElement', initialFocus)
           setTimeout(() => focus(initialFocus))
 
@@ -156,5 +178,6 @@ export function useFocusLock(
     deactivate,
     pause,
     unpause,
+    content,
   }
 }

packages/c-modal/examples/base-c-modal.vue

@@ -6,7 +6,7 @@
     h="full"
     w="100%"
   >
-    <c-button @click="isOpen = true" variant="luxury">Checkout</c-button>
+    <c-button @click="isOpen = true">Checkout</c-button>
     <!-- eslint-disable-next-line -->
     <c-modal v-model:is-open="isOpen">
       <c-modal-overlay />

packages/c-modal/src/c-modal.ts

@@ -18,11 +18,13 @@ import {
   toRefs,
   computed,
   ToRefs,
-  unref,
-  ref,
   mergeProps,
-  Fragment,
+  onMounted,
+  watchEffect,
+  UnwrapRef,
   watch,
+  ref,
+  cloneVNode,
 } from 'vue'
 import {
   chakra,
@@ -33,18 +35,26 @@ import {
 } from '@chakra-ui/vue-system'
 import { createContext, TemplateRef } from '@chakra-ui/vue-utils'
 import { CPortal } from '@chakra-ui/c-portal'
-import { FocusLockOptions, useFocusLock } from '@chakra-ui/c-focus-lock'
+import {
+  CFocusLock,
+  FocusLockProps,
+  useFocusLock,
+} from '@chakra-ui/c-focus-lock'
 import { CScrollLock } from '@chakra-ui/c-scroll-lock'
 import { CMotion } from '@chakra-ui/c-motion'
 
 import { useModal, UseModalOptions, UseModalReturn } from './use-modal'
 import { focus, FocusableElement } from '@chakra-ui/utils'
+import { FocusTarget } from 'focus-trap'
 
 type ScrollBehavior = 'inside' | 'outside'
 type MotionPreset = 'slideInBottom' | 'slideInRight' | 'scale' | 'none'
 
 export interface ModalOptions
-  extends Omit<FocusLockOptions, 'enabled' | 'closeModal' | 'handleEscape'> {
+  extends Omit<
+    FocusLockProps,
+    'enabled' | 'closeModal' | 'isActive' | 'handleEscape'
+  > {
   /**
    *  If `true`, the modal will be centered on screen.
    * @default false
@@ -60,7 +70,7 @@ export interface ModalOptions
   scrollBehavior?: ScrollBehavior
 }
 
-export interface CModalProps extends UseModalOptions, ModalOptions {
+export interface CModalProps extends UnwrapRef<UseModalOptions>, ModalOptions {
   /**
    * If `true`, the modal will display
    *
@@ -85,15 +95,7 @@ export interface CModalProps extends UseModalOptions, ModalOptions {
    *
    * @default true
    */
-  autoFocus?: boolean
-  /**
-   * The `ref` of element to receive focus when the modal opens.
-   */
-  initialFocusRef?: () => FocusableElement
-  /**
-   * The `ref` of element to receive focus when the modal closes.
-   */
-  finalFocusRef?: () => FocusableElement
+  autoFocus: boolean
   /**
    * If `true`, the modal will return focus to the element that triggered it when it closes.
    * @default true
@@ -123,7 +125,18 @@ export interface CModalProps extends UseModalOptions, ModalOptions {
   motionPreset?: MotionPreset
 }
 
-type IUseModalOptions = ToRefs<Omit<CModalProps, 'closeModal' | 'handleEscape'>>
+type IUseModalOptions = ToRefs<
+  Omit<
+    CModalProps,
+    | 'closeModal'
+    | 'handleEscape'
+    | 'preserveScrollBarGap'
+    | 'allowPinchZoom'
+    | 'motionPreset'
+    | 'trapFocus'
+    | 'autoFocus'
+  >
+>
 
 interface CModalContext extends IUseModalOptions, UseModalReturn {
   //   /** The transition to be used for the CModal */
@@ -204,11 +217,11 @@ export const CModal = defineComponent({
     }
 
     const styles = useMultiStyleConfig('Modal', mergeProps(props, attrs))
-    const modalOptions = reactive({
-      ...props,
+    const modalOptions = {
+      ...toRefs(reactive(props)),
       closeModal,
       handleEscape,
-    })
+    }
     const modal = useModal(modalOptions)
 
     ModalContextProvider({
@@ -235,6 +248,8 @@ export const CModalFocusScope = defineComponent({
       initialFocusRef,
       returnFocusOnClose,
       finalFocusRef,
+      dialogRef,
+      dialogEl,
       blockScrollOnMount,
     } = useModalContext()
 
@@ -244,31 +259,47 @@ export const CModalFocusScope = defineComponent({
         : finalFocusRef?.value
     )
 
-    const focusLockOptions: FocusLockOptions = reactive({
-      enabled: isOpen.value,
-      autoFocus: true,
-      initialFocusRef: initialFocusRef?.value,
-      returnFocus: returnFocusOnClose?.value,
-      clickOutsideDeactivates: false,
-      escapeDeactivates: false,
-      onDeactivate: () => {
-        if (finalFocusEl.value) {
-          focus(finalFocusEl.value)
-        }
-      },
-    })
+    // const focusLockOptions = reactive({
+    //   immediate: true,
+    //   initialFocus: initialFocusRef?.value as FocusTarget,
+    //   returnFocus: returnFocusOnClose?.value,
+    //   clickOutsideDeactivates: false,
+    //   escapeDeactivates: false,
+    //   onDeactivate: () => {
+    //     if (finalFocusEl.value) {
+    //       focus(finalFocusEl.value as FocusableElement)
+    //     }
+    //   },
+    //   onActivate: () => {
+    //     console.log('focus lock activated')
+    //   },
+    // })
+    // })
 
-    const { lock } = useFocusLock(focusLockOptions)
+    const contentRef = ref()
+
+    watch(contentRef, (el) => console.log('contentRef value updated', el), {
+      flush: 'post',
+    })
 
     return () => {
       return h(
-        CScrollLock,
+        CFocusLock,
         {
-          ref: lock,
-          ...attrs,
-          enabled: blockScrollOnMount?.value,
+          attrs,
         },
-        slots
+        () => [
+          h(
+            CScrollLock,
+            {
+              enabled: blockScrollOnMount?.value,
+            },
+            () =>
+              slots.default?.({
+                contentRef,
+              })
+          ),
+        ]
       )
     }
   },
@@ -283,7 +314,13 @@ export const CModalContent = defineComponent({
   inheritAttrs: false,
   emits: ['click'],
   setup(_, { attrs, slots }) {
-    const { dialogProps, dialogContainerProps, isOpen } = useModalContext()
+    const {
+      dialogProps,
+      dialogContainerProps,
+      dialogEl,
+      dialogRef,
+      isOpen,
+    } = useModalContext()
     const styles = useStyles()
 
     const dialogContainerStyles = computed<SystemStyleObject>(() => ({
@@ -305,8 +342,14 @@ export const CModalContent = defineComponent({
       ...styles.value.dialog,
     }))
 
+    const dialogHack = ref()
+
+    watch(dialogHack, (el) => {
+      console.log('fromCModalContent', el)
+    })
+
     return () =>
-      h(CModalFocusScope, {}, () => [
+      h(CModalFocusScope, null, () =>
         h(
           chakra('div', {
             label: 'modal__content-container',
@@ -321,22 +364,28 @@ export const CModalContent = defineComponent({
               },
               () => [
                 isOpen.value &&
-                  h(
-                    chakra('div', {
-                      __css: dialogStyles.value,
-                      label: 'modal__content',
-                    }),
+                  cloneVNode(
+                    h(
+                      chakra('div', {
+                        __css: dialogStyles.value,
+                        label: 'modal__content',
+                      }),
+                      {
+                        ...attrs,
+                        ...dialogProps.value,
+                        ref: dialogHack,
+                      },
+                      slots
+                    ),
                     {
-                      ...attrs,
-                      ...dialogProps.value,
-                    },
-                    slots
+                      ref: dialogHack,
+                    }
                   ),
               ]
             ),
           ]
-        ),
-      ])
+        )
+      )
   },
 })