feat(components): [message-box] add autofocus attribute (#8445)

* feat(components): [message-box] add autofocus attribute * fix: autofocus to be true by default * docs: message-box autofocus default value * chore: remove useless comment * fix: focusStartRef value el
element-plus · Jun 25, 2022 · 5d88f62 · 5d88f62
1 parent db766ac
commit 5d88f62
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 3 deletions.
diff --git a/docs/.vitepress/vitepress/styles/css-vars.scss b/docs/.vitepress/vitepress/styles/css-vars.scss
@@ -55,7 +55,7 @@
   --content-min-width: 16rem;
   --content-max-width: 48rem;
 
-  --nav-z-index: 20;
+  --nav-z-index: 10;
   --sub-nav-z-index: 10;
   --sidebar-z-index: 40;
   --overlay-z-index: 30;

diff --git a/docs/en-US/component/message-box.md b/docs/en-US/component/message-box.md
@@ -154,6 +154,7 @@ The corresponding methods are: `ElMessageBox`, `ElMessageBox.alert`, `ElMessageB
 
 | Attribute                    | Description                                                                                                                              | Type                                                                                                                                                                                                                            | Accepted Values                  | Default                                          |
 | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------ |
+| autofocus                    | auto focus when open MessageBox                                                                                                          | boolean                                                                                                                                                                                                                         | —                                | true                                             |
 | title                        | title of the MessageBox                                                                                                                  | string                                                                                                                                                                                                                          | —                                | —                                                |
 | message                      | content of the MessageBox                                                                                                                | string                                                                                                                                                                                                                          | —                                | —                                                |
 | dangerouslyUseHTMLString     | whether `message` is treated as HTML string                                                                                              | boolean                                                                                                                                                                                                                         | —                                | false                                            |

diff --git a/docs/examples/message-box/alert.vue b/docs/examples/message-box/alert.vue
@@ -8,6 +8,8 @@ import type { Action } from 'element-plus'
 
 const open = () => {
   ElMessageBox.alert('This is a message', 'Title', {
+    // if you want to disable its autofocus
+    // autofocus: false,
     confirmButtonText: 'OK',
     callback: (action: Action) => {
       ElMessage({

diff --git a/packages/components/message-box/__tests__/message-box.test.ts b/packages/components/message-box/__tests__/message-box.test.ts
@@ -144,6 +144,19 @@ describe('MessageBox', () => {
     expect(msgbox).toBe(null)
   })
 
+  test('autofocus', async () => {
+    MessageBox.alert('这是一段内容', {
+      autofocus: false,
+      title: '标题名称',
+    })
+    await rAF()
+    const btnElm = document.querySelector(
+      '.el-message-box__btns .el-button--primary'
+    )
+    const haveFocus = btnElm.isSameNode(document.activeElement)
+    expect(haveFocus).toBe(false)
+  })
+
   test('prompt', async () => {
     MessageBox.prompt('这是一段内容', {
       title: '标题名称',

diff --git a/packages/components/message-box/src/index.vue b/packages/components/message-box/src/index.vue
@@ -259,6 +259,8 @@ export default defineComponent({
     const { nextZIndex } = useZIndex()
     // s represents state
     const state = reactive<MessageBoxState>({
+      // autofocus element when open message-box
+      autofocus: true,
       beforeClose: null,
       callback: null,
       cancelButtonText: '',
@@ -337,15 +339,23 @@ export default defineComponent({
       (val) => {
         if (val) {
           if (props.boxType !== 'prompt') {
-            focusStartRef.value = confirmRef.value?.$el ?? rootRef.value
+            if (state.autofocus) {
+              focusStartRef.value = confirmRef.value?.$el ?? rootRef.value
+            } else {
+              focusStartRef.value = rootRef.value
+            }
           }
           state.zIndex = nextZIndex()
         }
         if (props.boxType !== 'prompt') return
         if (val) {
           nextTick().then(() => {
             if (inputRef.value && inputRef.value.$el) {
-              focusStartRef.value = getInputElement() ?? rootRef.value
+              if (state.autofocus) {
+                focusStartRef.value = getInputElement() ?? rootRef.value
+              } else {
+                focusStartRef.value = rootRef.value
+              }
             }
           })
         } else {

diff --git a/packages/components/message-box/src/message-box.type.ts b/packages/components/message-box/src/message-box.type.ts
@@ -16,6 +16,7 @@ export interface MessageBoxInputValidator {
 }
 
 export declare interface MessageBoxState {
+  autofocus: boolean
   title: string
   message: string
   type: MessageType
@@ -62,6 +63,11 @@ export type Callback =
 
 /** Options used in MessageBox */
 export interface ElMessageBoxOptions {
+  /**
+   * auto focus when open message-box
+   */
+  autofocus?: boolean
+
   /** Callback before MessageBox closes, and it will prevent MessageBox from closing */
   beforeClose?: (
     action: Action,