Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 5 commits into from Jun 25, 2022
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
de89791
feat(components): [message-box] add autofocus attribute
YunYouJun Jun 24, 2022
1de52f8
fix: autofocus to be true by default
YunYouJun Jun 24, 2022
6e9be90
docs: message-box autofocus default value
YunYouJun Jun 24, 2022
a21f29e
chore: remove useless comment
YunYouJun Jun 24, 2022
b163bf3
fix: focusStartRef value el
YunYouJun Jun 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/.vitepress/vitepress/styles/css-vars.scss
View file
Open in desktop
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions docs/en-US/component/message-box.md
View file
Open in desktop
Expand Up @@ -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 |
Expand Down
1 change: 1 addition & 0 deletions docs/examples/message-box/alert.vue
View file
Open in desktop
Expand Up @@ -8,6 +8,7 @@ import type { Action } from 'element-plus'

const open = () => {
ElMessageBox.alert('This is a message', 'Title', {
// autofocus: true,
sxzz marked this conversation as resolved.
Show resolved Hide resolved
confirmButtonText: 'OK',
callback: (action: Action) => {
ElMessage({
Expand Down
1 change: 1 addition & 0 deletions docs/examples/message-box/prompt.vue
View file
Open in desktop
Expand Up @@ -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:
Expand Down
15 changes: 15 additions & 0 deletions packages/components/message-box/__tests__/message-box.test.ts
View file
Open in desktop
Expand Up @@ -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',
Expand All @@ -163,6 +177,7 @@ describe('MessageBox', () => {

test('prompt: focus on textarea', async () => {
MessageBox.prompt('这是一段内容', {
autofocus: true,
inputType: 'textarea',
title: '标题名称',
})
Expand Down
4 changes: 3 additions & 1 deletion packages/components/message-box/src/index.vue
View file
Open in desktop
Expand Up @@ -18,7 +18,7 @@
>
<el-focus-trap
loop
:trapped="visible"
:trapped="autofocus && visible"
YunYouJun marked this conversation as resolved.
Show resolved Hide resolved
:focus-trap-el="rootRef"
:focus-start-el="focusStartRef"
@release-requested="onCloseRequested"
Expand Down Expand Up @@ -259,6 +259,8 @@ export default defineComponent({
const { nextZIndex } = useZIndex()
// s represents state
const state = reactive<MessageBoxState>({
// autofocus button when open message-box
autofocus: false,
beforeClose: null,
callback: null,
cancelButtonText: '',
Expand Down
6 changes: 6 additions & 0 deletions packages/components/message-box/src/message-box.type.ts
View file
Open in desktop
Expand Up @@ -16,6 +16,7 @@ export interface MessageBoxInputValidator {
}

export declare interface MessageBoxState {
autofocus: boolean
title: string
message: string
type: MessageType
Expand Down Expand Up @@ -62,6 +63,11 @@ export type Callback =

/** Options used in MessageBox */
export interface ElMessageBoxOptions {
/**
* auto focus confirm button when open message-box
*/
autofocus?: boolean
YunYouJun marked this conversation as resolved.
Show resolved Hide resolved

/** Callback before MessageBox closes, and it will prevent MessageBox from closing */
beforeClose?: (
action: Action,
Expand Down