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(drawer): trigger keydown event #381

Merged
merged 2 commits into from
Feb 9, 2022
Merged

fix(drawer): trigger keydown event #381

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e929850
fix(drawer): trigger keydown event
uyarn Feb 9, 2022
f925bdc
chore: update test
uyarn Feb 9, 2022
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
5 changes: 5 additions & 0 deletions src/drawer/drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,9 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DrawerConfig>('d
},
visible: {
handler(val) {
if (val) {
(this.$refs.drawerContainer as HTMLDivElement).focus?.();
}
this.handleScrollThrough(val);
},
},
Expand All @@ -112,6 +115,8 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DrawerConfig>('d
style={{ zIndex: this.zIndex }}
onkeydown={this.onKeyDown}
v-transfer-dom={this.attach}
ref="drawerContainer"
tabindex={0}
chaishi marked this conversation as resolved.
Show resolved Hide resolved
>
{this.showOverlay && <div class={`${name}__mask`} onClick={this.handleWrapperClick} />}
<div class={this.wrapperClasses} style={this.wrapperStyles}>
Expand Down
22 changes: 11 additions & 11 deletions test/ssr/__snapshots__/ssr.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3263,7 +3263,7 @@ exports[`ssr snapshot test renders ./examples/config-provider/demos/popconfirm.v
<div class="t-popup__reference">
<div name="t-popup--animation" appear="true"></div><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-danger"><span class="t-button__text">Danger</span></button>
</div> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">Open Drawer</span></button>
<div class="t-drawer t-drawer--right">
<div tabindex="0" class="t-drawer t-drawer--right">
<div class="t-drawer__mask"></div>
<div class="t-drawer__content-wrapper t-drawer__content-wrapper--right" style="width:300px;height:;">
<div class="t-drawer__header">Drawer</div>
Expand Down Expand Up @@ -3711,7 +3711,7 @@ exports[`ssr snapshot test renders ./examples/divider/demos/vertical.vue correct
exports[`ssr snapshot test renders ./examples/drawer/demos/attach-parent.vue correctly 1`] = `
<div class="t-container">
<div class="t-suf-container">
<div class="t-drawer t-drawer--right t-drawer--attach">
<div tabindex="0" class="t-drawer t-drawer--right t-drawer--attach">
<div class="t-drawer__mask"></div>
<div class="t-drawer__content-wrapper t-drawer__content-wrapper--right" style="width:300px;height:;">
<div class="t-drawer__header">抽屉标题</div>
Expand All @@ -3738,7 +3738,7 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/attach-parent.vue cor

exports[`ssr snapshot test renders ./examples/drawer/demos/base.vue correctly 1`] = `
<div>
<div class="t-drawer t-drawer--right">
<div tabindex="0" class="t-drawer t-drawer--right">
<div class="t-drawer__mask"></div>
<div class="t-drawer__content-wrapper t-drawer__content-wrapper--right" style="width:300px;height:;">
<div class="t-drawer__header">抽屉标题</div>
Expand All @@ -3758,7 +3758,7 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/base.vue correctly 1`

exports[`ssr snapshot test renders ./examples/drawer/demos/custom.vue correctly 1`] = `
<div>
<div class="t-drawer t-drawer--right">
<div tabindex="0" class="t-drawer t-drawer--right">
<div class="t-drawer__mask"></div>
<div class="t-drawer__content-wrapper t-drawer__content-wrapper--right" style="width:300px;height:;">
<div class="t-drawer__header">
Expand All @@ -3771,7 +3771,7 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/custom.vue correctly
<div class="t-drawer__footer"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">确定</span></button> <button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default"><span class="t-button__text">取消</span></button></div>
</div>
</div>
<div class="t-drawer t-drawer--right">
<div tabindex="0" class="t-drawer t-drawer--right">
<div class="t-drawer__mask"></div>
<div class="t-drawer__content-wrapper t-drawer__content-wrapper--right" style="width:300px;height:;">
<div class="t-drawer__header">抽屉标题</div>
Expand All @@ -3784,7 +3784,7 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/custom.vue correctly
</div>
</div>
</div>
<div class="t-drawer t-drawer--right">
<div tabindex="0" class="t-drawer t-drawer--right">
<div class="t-drawer__mask"></div>
<div class="t-drawer__content-wrapper t-drawer__content-wrapper--right" style="width:300px;height:;">
<div class="t-drawer__header">抽屉标题</div>
Expand Down Expand Up @@ -3812,7 +3812,7 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/destroy.vue correctly

exports[`ssr snapshot test renders ./examples/drawer/demos/no-mask.vue correctly 1`] = `
<div>
<div class="t-drawer t-drawer--right t-drawer--without-mask">
<div tabindex="0" class="t-drawer t-drawer--right t-drawer--without-mask">
<div class="t-drawer__content-wrapper t-drawer__content-wrapper--right" style="width:300px;height:;">
<div class="t-drawer__header">抽屉标题</div>
<div class="t-drawer__close-btn"></div>
Expand All @@ -3829,7 +3829,7 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/no-mask.vue correctly

exports[`ssr snapshot test renders ./examples/drawer/demos/operation.vue correctly 1`] = `
<div>
<div class="t-drawer t-drawer--right">
<div tabindex="0" class="t-drawer t-drawer--right">
<div class="t-drawer__mask"></div>
<div class="t-drawer__content-wrapper t-drawer__content-wrapper--right" style="width:300px;height:;">
<div class="t-drawer__header">抽屉标题</div>
Expand All @@ -3855,7 +3855,7 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/operation.vue correct

exports[`ssr snapshot test renders ./examples/drawer/demos/placement.vue correctly 1`] = `
<div>
<div class="t-drawer t-drawer--right">
<div tabindex="0" class="t-drawer t-drawer--right">
<div class="t-drawer__mask"></div>
<div class="t-drawer__content-wrapper t-drawer__content-wrapper--right" style="width:300px;height:;">
<div class="t-drawer__header">抽屉标题</div>
Expand All @@ -3876,7 +3876,7 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/placement.vue correct

exports[`ssr snapshot test renders ./examples/drawer/demos/popup.vue correctly 1`] = `
<div>
<div class="t-drawer t-drawer--right">
<div tabindex="0" class="t-drawer t-drawer--right">
<div class="t-drawer__mask"></div>
<div class="t-drawer__content-wrapper t-drawer__content-wrapper--right" style="width:300px;height:;">
<div class="t-drawer__header">抽屉标题</div>
Expand All @@ -3898,7 +3898,7 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/popup.vue correctly 1

exports[`ssr snapshot test renders ./examples/drawer/demos/size.vue correctly 1`] = `
<div>
<div class="t-drawer t-drawer--right">
<div tabindex="0" class="t-drawer t-drawer--right">
<div class="t-drawer__mask"></div>
<div class="t-drawer__content-wrapper t-drawer__content-wrapper--right" style="width:300px;height:;">
<div class="t-drawer__header">抽屉标题</div>
Expand Down
9 changes: 9 additions & 0 deletions test/unit/drawer/__snapshots__/demo.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ exports[`Drawer Demo CurrentDOMModeUsageExample wroks fine 1`] = `
>
<div
class="t-drawer t-drawer--right t-drawer--attach"
tabindex="0"
>
<div
class="t-drawer__mask"
Expand Down Expand Up @@ -222,6 +223,7 @@ exports[`Drawer Demo CustomUsageExample wroks fine 1`] = `
<div>
<div
class="t-drawer t-drawer--right"
tabindex="0"
>
<div
class="t-drawer__mask"
Expand Down Expand Up @@ -277,6 +279,7 @@ exports[`Drawer Demo CustomUsageExample wroks fine 1`] = `

<div
class="t-drawer t-drawer--right"
tabindex="0"
>
<div
class="t-drawer__mask"
Expand Down Expand Up @@ -331,6 +334,7 @@ exports[`Drawer Demo CustomUsageExample wroks fine 1`] = `

<div
class="t-drawer t-drawer--right"
tabindex="0"
>
<div
class="t-drawer__mask"
Expand Down Expand Up @@ -429,6 +433,7 @@ exports[`Drawer Demo NoMaskUsageExample wroks fine 1`] = `
<div>
<div
class="t-drawer t-drawer--right t-drawer--without-mask"
tabindex="0"
>
<div
class="t-drawer__content-wrapper t-drawer__content-wrapper--right"
Expand Down Expand Up @@ -497,6 +502,7 @@ exports[`Drawer Demo PlacementUsageExample wroks fine 1`] = `
<div>
<div
class="t-drawer t-drawer--right"
tabindex="0"
>
<div
class="t-drawer__mask"
Expand Down Expand Up @@ -720,6 +726,7 @@ exports[`Drawer Demo SizeUsageExample wroks fine 1`] = `
<div>
<div
class="t-drawer t-drawer--right"
tabindex="0"
>
<div
class="t-drawer__mask"
Expand Down Expand Up @@ -930,6 +937,7 @@ exports[`Drawer Demo operation wroks fine 1`] = `
<div>
<div
class="t-drawer t-drawer--right"
tabindex="0"
>
<div
class="t-drawer__mask"
Expand Down Expand Up @@ -1051,6 +1059,7 @@ exports[`Drawer base demo works fine 1`] = `
<div>
<div
class="t-drawer t-drawer--right"
tabindex="0"
>
<div
class="t-drawer__mask"
Expand Down