From de8979189261fbde6b8c58b76c5482f0b90d0110 Mon Sep 17 00:00:00 2001 From: YunYouJun Date: Fri, 24 Jun 2022 11:54:30 +0800 Subject: [PATCH 1/5] feat(components): [message-box] add autofocus attribute --- docs/.vitepress/vitepress/styles/css-vars.scss | 2 +- docs/en-US/component/message-box.md | 1 + docs/examples/message-box/alert.vue | 1 + docs/examples/message-box/prompt.vue | 1 + .../message-box/__tests__/message-box.test.ts | 15 +++++++++++++++ packages/components/message-box/src/index.vue | 4 +++- .../message-box/src/message-box.type.ts | 6 ++++++ 7 files changed, 28 insertions(+), 2 deletions(-) diff --git a/docs/.vitepress/vitepress/styles/css-vars.scss b/docs/.vitepress/vitepress/styles/css-vars.scss index 22ee70b978caf..5ea845a25f563 100644 --- 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 index 795a4481e09fd..2a99ca5cbbdf2 100644 --- 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 confirm button when open MessageBox | boolean | - | - | | 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 index 92772c412dfb7..494eddc088bc0 100644 --- a/docs/examples/message-box/alert.vue +++ b/docs/examples/message-box/alert.vue @@ -8,6 +8,7 @@ import type { Action } from 'element-plus' const open = () => { ElMessageBox.alert('This is a message', 'Title', { + // autofocus: true, confirmButtonText: 'OK', callback: (action: Action) => { ElMessage({ diff --git a/docs/examples/message-box/prompt.vue b/docs/examples/message-box/prompt.vue index f013377f535fa..d4096357d4ed2 100644 --- a/docs/examples/message-box/prompt.vue +++ b/docs/examples/message-box/prompt.vue @@ -7,6 +7,7 @@ import { ElMessage, ElMessageBox } from 'element-plus' const open = () => { ElMessageBox.prompt('Please input your e-mail', 'Tip', { + autofocus: true, confirmButtonText: 'OK', cancelButtonText: 'Cancel', inputPattern: diff --git a/packages/components/message-box/__tests__/message-box.test.ts b/packages/components/message-box/__tests__/message-box.test.ts index 80da2d52829c1..18a42910ded87 100644 --- a/packages/components/message-box/__tests__/message-box.test.ts +++ b/packages/components/message-box/__tests__/message-box.test.ts @@ -144,8 +144,22 @@ describe('MessageBox', () => { expect(msgbox).toBe(null) }) + test('autofocus', async () => { + MessageBox.alert('这是一段内容', { + autofocus: true, + title: '标题名称', + }) + await rAF() + const btnElm = document.querySelector( + '.el-message-box__btns .el-button--primary' + ) + const haveFocus = btnElm.isSameNode(document.activeElement) + expect(haveFocus).toBe(true) + }) + test('prompt', async () => { MessageBox.prompt('这是一段内容', { + autofocus: true, title: '标题名称', inputPattern: /test/, inputErrorMessage: 'validation failed', @@ -163,6 +177,7 @@ describe('MessageBox', () => { test('prompt: focus on textarea', async () => { MessageBox.prompt('这是一段内容', { + autofocus: true, inputType: 'textarea', title: '标题名称', }) diff --git a/packages/components/message-box/src/index.vue b/packages/components/message-box/src/index.vue index 7be248449f05b..81c583a34fbe5 100644 --- a/packages/components/message-box/src/index.vue +++ b/packages/components/message-box/src/index.vue @@ -18,7 +18,7 @@ > ({ + // autofocus button when open message-box + autofocus: false, beforeClose: null, callback: null, cancelButtonText: '', diff --git a/packages/components/message-box/src/message-box.type.ts b/packages/components/message-box/src/message-box.type.ts index 0aca6f494c270..c9e721f79c1c4 100644 --- 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 confirm button when open message-box + */ + autofocus?: boolean + /** Callback before MessageBox closes, and it will prevent MessageBox from closing */ beforeClose?: ( action: Action, From 1de52f844176aedd66d96a701721b1c5ae2b88ae Mon Sep 17 00:00:00 2001 From: YunYouJun Date: Sat, 25 Jun 2022 01:42:17 +0800 Subject: [PATCH 2/5] fix: autofocus to be true by default --- docs/examples/message-box/alert.vue | 3 ++- .../components/message-box/__tests__/message-box.test.ts | 6 ++---- packages/components/message-box/src/index.vue | 8 ++++---- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/docs/examples/message-box/alert.vue b/docs/examples/message-box/alert.vue index 494eddc088bc0..1d29dbbab493f 100644 --- a/docs/examples/message-box/alert.vue +++ b/docs/examples/message-box/alert.vue @@ -8,7 +8,8 @@ import type { Action } from 'element-plus' const open = () => { ElMessageBox.alert('This is a message', 'Title', { - // autofocus: true, + // 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 index 18a42910ded87..9fe51f06a11ec 100644 --- a/packages/components/message-box/__tests__/message-box.test.ts +++ b/packages/components/message-box/__tests__/message-box.test.ts @@ -146,7 +146,7 @@ describe('MessageBox', () => { test('autofocus', async () => { MessageBox.alert('这是一段内容', { - autofocus: true, + autofocus: false, title: '标题名称', }) await rAF() @@ -154,12 +154,11 @@ describe('MessageBox', () => { '.el-message-box__btns .el-button--primary' ) const haveFocus = btnElm.isSameNode(document.activeElement) - expect(haveFocus).toBe(true) + expect(haveFocus).toBe(false) }) test('prompt', async () => { MessageBox.prompt('这是一段内容', { - autofocus: true, title: '标题名称', inputPattern: /test/, inputErrorMessage: 'validation failed', @@ -177,7 +176,6 @@ describe('MessageBox', () => { test('prompt: focus on textarea', async () => { MessageBox.prompt('这是一段内容', { - autofocus: true, inputType: 'textarea', title: '标题名称', }) diff --git a/packages/components/message-box/src/index.vue b/packages/components/message-box/src/index.vue index 81c583a34fbe5..6908b89ffb25f 100644 --- a/packages/components/message-box/src/index.vue +++ b/packages/components/message-box/src/index.vue @@ -18,7 +18,7 @@ > ({ // autofocus button when open message-box - autofocus: false, + autofocus: true, beforeClose: null, callback: null, cancelButtonText: '', @@ -338,7 +338,7 @@ export default defineComponent({ () => visible.value, (val) => { if (val) { - if (props.boxType !== 'prompt') { + if (props.boxType !== 'prompt' && state.autofocus) { focusStartRef.value = confirmRef.value?.$el ?? rootRef.value } state.zIndex = nextZIndex() @@ -346,7 +346,7 @@ export default defineComponent({ if (props.boxType !== 'prompt') return if (val) { nextTick().then(() => { - if (inputRef.value && inputRef.value.$el) { + if (inputRef.value && inputRef.value.$el && state.autofocus) { focusStartRef.value = getInputElement() ?? rootRef.value } }) From 6e9be90d9cd4f8ec58c6ca23978312a03c96c410 Mon Sep 17 00:00:00 2001 From: YunYouJun Date: Sat, 25 Jun 2022 01:45:52 +0800 Subject: [PATCH 3/5] docs: message-box autofocus default value --- docs/en-US/component/message-box.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en-US/component/message-box.md b/docs/en-US/component/message-box.md index 2a99ca5cbbdf2..b003d3fb0124f 100644 --- a/docs/en-US/component/message-box.md +++ b/docs/en-US/component/message-box.md @@ -154,7 +154,7 @@ The corresponding methods are: `ElMessageBox`, `ElMessageBox.alert`, `ElMessageB | Attribute | Description | Type | Accepted Values | Default | | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------ | -| autofocus | auto focus confirm button when open MessageBox | boolean | - | - | +| 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 | From a21f29eef0bcd6f5822700e118094041a9c6ddd7 Mon Sep 17 00:00:00 2001 From: YunYouJun Date: Sat, 25 Jun 2022 01:49:12 +0800 Subject: [PATCH 4/5] chore: remove useless comment --- docs/examples/message-box/prompt.vue | 1 - packages/components/message-box/src/index.vue | 2 +- packages/components/message-box/src/message-box.type.ts | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/docs/examples/message-box/prompt.vue b/docs/examples/message-box/prompt.vue index d4096357d4ed2..f013377f535fa 100644 --- a/docs/examples/message-box/prompt.vue +++ b/docs/examples/message-box/prompt.vue @@ -7,7 +7,6 @@ import { ElMessage, ElMessageBox } from 'element-plus' const open = () => { ElMessageBox.prompt('Please input your e-mail', 'Tip', { - autofocus: true, confirmButtonText: 'OK', cancelButtonText: 'Cancel', inputPattern: diff --git a/packages/components/message-box/src/index.vue b/packages/components/message-box/src/index.vue index 6908b89ffb25f..28dd0042ac178 100644 --- a/packages/components/message-box/src/index.vue +++ b/packages/components/message-box/src/index.vue @@ -259,7 +259,7 @@ export default defineComponent({ const { nextZIndex } = useZIndex() // s represents state const state = reactive({ - // autofocus button when open message-box + // autofocus element when open message-box autofocus: true, beforeClose: null, callback: null, diff --git a/packages/components/message-box/src/message-box.type.ts b/packages/components/message-box/src/message-box.type.ts index c9e721f79c1c4..618bc8ad422d3 100644 --- a/packages/components/message-box/src/message-box.type.ts +++ b/packages/components/message-box/src/message-box.type.ts @@ -64,7 +64,7 @@ export type Callback = /** Options used in MessageBox */ export interface ElMessageBoxOptions { /** - * auto focus confirm button when open message-box + * auto focus when open message-box */ autofocus?: boolean From b163bf3b0284971863a1e5768f9073cdef916a21 Mon Sep 17 00:00:00 2001 From: YunYouJun Date: Sat, 25 Jun 2022 19:51:37 +0800 Subject: [PATCH 5/5] fix: focusStartRef value el --- packages/components/message-box/src/index.vue | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/components/message-box/src/index.vue b/packages/components/message-box/src/index.vue index 28dd0042ac178..c6c68c49c3a03 100644 --- a/packages/components/message-box/src/index.vue +++ b/packages/components/message-box/src/index.vue @@ -338,16 +338,24 @@ export default defineComponent({ () => visible.value, (val) => { if (val) { - if (props.boxType !== 'prompt' && state.autofocus) { - focusStartRef.value = confirmRef.value?.$el ?? rootRef.value + if (props.boxType !== 'prompt') { + 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 && state.autofocus) { - focusStartRef.value = getInputElement() ?? rootRef.value + if (inputRef.value && inputRef.value.$el) { + if (state.autofocus) { + focusStartRef.value = getInputElement() ?? rootRef.value + } else { + focusStartRef.value = rootRef.value + } } }) } else {