fix: 修复 FaDrawer 和 FaModal 组件开启时警告错误

Author: hooray

packages/components/src/drawer/index.ts

@@ -50,6 +50,7 @@ const slots = defineSlots<{
   footer?: () => VNode
 }>()
 
+const sheetContentRef = useTemplateRef('sheetContentRef')
 const drawerId = shallowRef(props.id ?? useId())
 const isOpen = ref(props.modelValue)
 
@@ -140,6 +141,9 @@ function handleOpenAutoFocus(e: Event) {
   if (!props.openAutoFocus) {
     e.preventDefault()
     e.stopPropagation()
+    nextTick(() => {
+      sheetContentRef.value?.el?.$el?.focus()
+    })
   }
 }
 
@@ -176,6 +180,7 @@ function handleAnimationEnd() {
 <template>
   <Sheet :open="isOpen" @update:open="updateOpen">
     <SheetContent
+      ref="sheetContentRef"
       :drawer-id="drawerId"
       :open="isOpen"
       :z-index="props.zIndex"

packages/components/src/drawer/index.vue

@@ -38,6 +38,12 @@ const delegatedProps = reactiveOmit(props, 'class', 'side')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 
+const sheetContentRef = useTemplateRef<ComponentPublicInstance<typeof DialogContent>>('sheetContentRef')
+
+defineExpose({
+  el: sheetContentRef,
+})
+
 const showOverlay = computed(() => props.open && props.overlay)
 </script>
 
@@ -67,6 +73,7 @@ const showOverlay = computed(() => props.open && props.overlay)
     </Transition>
     <SheetOverlay class="hidden" />
     <DialogContent
+      ref="sheetContentRef"
       data-slot="sheet-content"
       :class="cn(
         'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',