fix(components): [el-dialog] revert focus trapping feature (#6346)

* fix(components): [el-dialog] revert focus trapping feature

- Revert focus trapping

* Remove focus trap documentation

docs/en-US/component/dialog.md

@@ -23,22 +23,6 @@ dialog/basic-usage
 
 :::
 
-## Focus trapping
-
-Dialog traps focus inside the dialog content which enables your users to navigate the content via keyboard.
-
-:::tip
-
-Focusing on other element after the dialog is closed will only work when `destroy-on-close` is enabled
-
-:::
-
-:::demo
-
-dialog/focus-trapping
-
-:::
-
 ## Customizations
 
 The content of Dialog can be anything, even a table or a form. This example shows how to use Element Plus Table and Form with Dialog。

packages/components/dialog/src/dialog-content.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :ref="composedDialogRef"
+    ref="dialogRef"
     :class="[
       ns.b(),
       ns.is('fullscreen', fullscreen),
@@ -13,7 +13,6 @@
     :aria-label="title || 'dialog'"
     :style="style"
     @click.stop
-    @keydown="onKeydown"
   >
     <div ref="headerRef" :class="ns.e('header')">
       <slot name="title">
@@ -45,8 +44,7 @@
 <script lang="ts" setup>
 import { inject } from 'vue'
 import { ElIcon } from '@element-plus/components/icon'
-import { FOCUS_TRAP_INJECTION_KEY } from '@element-plus/components/focus-trap'
-import { CloseComponents, composeRefs } from '@element-plus/utils'
+import { CloseComponents } from '@element-plus/utils'
 import { dialogContentProps, dialogContentEmits } from './dialog-content'
 
 import { elDialogInjectionKey } from './token'
@@ -58,7 +56,7 @@ defineProps(dialogContentProps)
 defineEmits(dialogContentEmits)
 
 const { dialogRef, headerRef, ns, style } = inject(elDialogInjectionKey)!
-const { focusTrapRef, onKeydown } = inject(FOCUS_TRAP_INJECTION_KEY)!
+// const { focusTrapRef, onKeydown } = inject(FOCUS_TRAP_INJECTION_KEY)!
 
-const composedDialogRef = composeRefs(focusTrapRef, dialogRef)
+// const composedDialogRef = composeRefs(focusTrapRef, dialogRef)
 </script>

packages/components/dialog/src/dialog.ts

@@ -55,6 +55,10 @@ export const dialogProps = buildProps({
   zIndex: {
     type: Number,
   },
+  trapFocus: {
+    type: Boolean,
+    default: false,
+  },
 } as const)
 
 export type DialogProps = ExtractPropTypes<typeof dialogProps>

packages/components/dialog/src/dialog.vue

@@ -19,33 +19,26 @@
           @mousedown="overlayEvent.onMousedown"
           @mouseup="overlayEvent.onMouseup"
         >
-          <el-focus-trap
+          <el-dialog-content
             v-if="rendered"
-            loop
-            trapped
-            @mount-on-focus="$emit('openAutoFocus')"
-            @unmount-on-focus="$emit('closeAutoFocus')"
+            :custom-class="customClass"
+            :center="center"
+            :close-icon="closeIcon"
+            :draggable="draggable"
+            :fullscreen="fullscreen"
+            :show-close="showClose"
+            :style="style"
+            :title="title"
+            @close="handleClose"
           >
-            <el-dialog-content
-              :custom-class="customClass"
-              :center="center"
-              :close-icon="closeIcon"
-              :draggable="draggable"
-              :fullscreen="fullscreen"
-              :show-close="showClose"
-              :style="style"
-              :title="title"
-              @close="handleClose"
-            >
-              <template #title>
-                <slot name="title" />
-              </template>
-              <slot />
-              <template #footer>
-                <slot name="footer" />
-              </template>
-            </el-dialog-content>
-          </el-focus-trap>
+            <template #title>
+              <slot name="title" />
+            </template>
+            <slot />
+            <template #footer>
+              <slot name="footer" />
+            </template>
+          </el-dialog-content>
         </div>
       </el-overlay>
     </transition>
@@ -55,7 +48,6 @@
 <script lang="ts" setup>
 import { computed, ref, provide } from 'vue'
 import { ElOverlay } from '@element-plus/components/overlay'
-import { ElFocusTrap } from '@element-plus/components/focus-trap'
 import { useNamespace, useDraggable, useSameTarget } from '@element-plus/hooks'
 import ElDialogContent from './dialog-content.vue'
 import { dialogProps, dialogEmits } from './dialog'