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

fix(dialog): 修改键盘事件绑定对象 #3728

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

fix(dialog): 修改键盘事件绑定对象 #3728

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6e0b679
fix(dialog): 修改键盘事件绑定对象
sinbadmaster Dec 11, 2023
5980e46
fix(dialog): 修改键盘事件绑定对象
sinbadmaster Dec 11, 2023
b109228
fix: 更新snap
sinbadmaster Dec 11, 2023
de8414e
Merge branch 'fix/esc' of https://github.com/sinbadmaster/tdesign-vue…
sinbadmaster Dec 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 20 additions & 12 deletions src/dialog/dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,7 @@ export default defineComponent({
return !isFullScreen.value ? { width: GetCSSValue(props.width) } : {}; // width全屏模式不生效
});

const divRef = ref<HTMLDivElement>();
watch(
() => props.visible,
(value) => {
Expand All @@ -204,11 +205,14 @@ export default defineComponent({
}
// 清除鼠标焦点 避免entry事件多次触发（按钮弹出弹窗 不移除焦点 立即按Entry按键 会造成弹窗关闭再弹出）
(document.activeElement as HTMLElement)?.blur();
// 获取焦点到当前dialog上
nextTick(() => {
divRef.value?.focus?.();
});
} else {
clearStyleFunc();
}
storeUid(value);
addKeyboardEvent(value);
},
);

Expand All @@ -232,17 +236,11 @@ export default defineComponent({
}
};

const addKeyboardEvent = (status: boolean) => {
if (status) {
document.addEventListener('keydown', keyboardEvent);
props.confirmOnEnter && document.addEventListener('keydown', keyboardEnterEvent);
} else {
document.removeEventListener('keydown', keyboardEvent);
props.confirmOnEnter && document.removeEventListener('keydown', keyboardEnterEvent);
}
};
// 回车出发确认事件
const keyboardEnterEvent = (e: KeyboardEvent) => {
if (!props.confirmOnEnter) {
return;
}
const eventSrc = e.target as HTMLElement;
if (eventSrc.tagName.toLowerCase() === 'input') return; // 若是input触发 则不执行
const { code } = e;
Expand All @@ -251,6 +249,7 @@ export default defineComponent({
}
};
const keyboardEvent = (e: KeyboardEvent) => {
keyboardEnterEvent(e);
if (e.code === 'Escape' && stack.top === instance.uid) {
props.onEscKeydown?.({ e });
// 根据closeOnEscKeydown判断按下ESC时是否触发close事件
Expand Down Expand Up @@ -419,7 +418,6 @@ export default defineComponent({
});

onBeforeUnmount(() => {
addKeyboardEvent(false);
destroySelf();
});

Expand All @@ -437,6 +435,8 @@ export default defineComponent({
hasEventOn,
renderDialog,
teleportElement,
keyboardEvent,
divRef,
};
},
render() {
Expand Down Expand Up @@ -465,7 +465,15 @@ export default defineComponent({
onAfterLeave={this.afterLeave}
>
{(!this.destroyOnClose || this.visible) && (
<div v-show={this.visible} class={ctxClass} style={ctxStyle} {...this.$attrs}>
<div
ref="divRef"
tabindex={0}
onKeydown={this.keyboardEvent}
v-show={this.visible}
class={ctxClass}
style={ctxStyle}
{...this.$attrs}
>
{view}
</div>
)}
Expand Down
19 changes: 11 additions & 8 deletions src/drawer/drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,12 +99,12 @@ export default defineComponent({
};
});

const handleEscKeydown = (e: KeyboardEvent) => {
if (props.closeOnEscKeydown ?? (globalConfig.value.closeOnEscKeydown && e.key === 'Escape')) {
props.onEscKeydown?.({ e });
closeDrawer({ trigger: 'esc', e });
}
};
// const handleEscKeydown = (e: KeyboardEvent) => {
// if (props.closeOnEscKeydown ?? (globalConfig.value.closeOnEscKeydown && e.key === 'Escape')) {
// props.onEscKeydown?.({ e });
// closeDrawer({ trigger: 'esc', e });
// }
// };

const clearStyleFunc = () => {
clearTimeout(styleTimer.value);
Expand Down Expand Up @@ -174,6 +174,9 @@ export default defineComponent({
if (!props.showInAttachedElement && props.preventScrollThrough) {
styleEl.value && document.head.appendChild(styleEl.value);
}
nextTick(() => {
drawerEle.value?.focus?.();
});
} else {
clearStyleFunc();
}
Expand Down Expand Up @@ -246,12 +249,12 @@ export default defineComponent({
document.head.appendChild(styleEl.value);
}

window.addEventListener('keydown', handleEscKeydown);
// window.addEventListener('keydown', handleEscKeydown);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这种不需要的就删掉吧 不用注释着

});

onBeforeUnmount(() => {
clearStyleFunc();
window.removeEventListener('keydown', handleEscKeydown);
// window.removeEventListener('keydown', handleEscKeydown);
});

return () => {
Expand Down
Loading
Loading