Topic: Press "ESC" in an 'mdb-modal' does not close the modal.
I have an application with a simple modal that I started with one of the standard example templates:
<template>
<div>
<mdb-btn color="primary" @click.native="modal = true">Launch demo modal</mdb-btn>
<mdb-modal :show="modal" @close="modal = false">
<mdb-modal-header>
<mdb-modal-title>Modal title</mdb-modal-title>
</mdb-modal-header>
<mdb-modal-body>...</mdb-modal-body>
<mdb-modal-footer>
<mdb-btn color="secondary" @click.native="modal = false">Close</mdb-btn>
<mdb-btn color="primary">Save changes</mdb-btn>
</mdb-modal-footer>
</mdb-modal>
</div>
</template>
In your demo when I launch that modal I can hit "ESC" and the modal closes. When I have that same code in my application pressing "ESC" does nothing. Also, in troubleshooting, I notice that in the demo code the modal header renders out to:
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
where the "X" on the top right renders to a <button> tag. But in my code AND in the modal source, the header renders the "X" as an <a> tag.
My Code from above template:
<div data-v-13d1e037="" class="text-center modal-header">
<h5 class="w-100 modal-title font-weight-bold" data-v-13d1e037="">
Modal title
</h5>
<a data-v-13d1e037="" flat="" class="close">×</a>
</div>
Which matches the template code (in node_modules\mdbvue\src\components\Modals\ModalHeader.vue)
as I would expect, but NOT what I'm seeing in the source of the demo module.
<template>
<component :is="tag" :class="className">
<slot></slot>
<a v-if="close" flat class="close" @click.prevent="away">×</a>
</component>
</template>
I realize that without my full webpack build process it's probably impossible to figure out my mistake, but any suggestions on where I might have gone wrong to get such a simple component to not look/work like yours would be great! (I'm using the mdbvue-6.7.1.tgz file in my build)
Thanks
Ok, I did find that by editing the mdb-modal component itself I can effect the change I want:
<template>
<transition name="fade"
@enter="enter"
@after-enter="afterEnter"
@before-leave="beforeLeave"
@after-leave="afterLeave"
>
<component :is="tag" v-if="show" :class="wrapperClass"
---> tabindex="0" v-on:keyup.esc="away" <---
>
<div :class="dialogClass" role="document" >
<div :class="contentClass" :style="computedContentStyle">
<slot></slot>
</div>
</div>
</component>
</transition>
</template>
Mikołaj Smoleński staff commented 5 years ago
Did you try to add native modifier to mdb-modal component?
Then it will be: v-on:keyup.esc.native="modal = false".
Best regards
Mike Barlow commented 5 years ago
Haven't tried that. But will see if it makes a difference. One thing I have noticed is that even with my change, I must first focus on something within the modal (such as an input field or button) to allow the "esc" to close the modal.
Mikołaj Smoleński staff commented 5 years ago
You're right. The easiest way will be to add this event to the wrapper. Best regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 6.7.1
- Device: Any
- Browser: Any
- OS: Any
- Provided sample code: No
- Provided link: Yes
Mikołaj Smoleński staff commented 5 years ago
Unfortunately it's a bug on our side. The
esckeyboard access will be added soon. Best regardsMikołaj Smoleński staff commented 5 years ago
On the other hand, adding such functionality is possible even now. Adding to mdb-modal a keyup event (i.e.
v-on:keyup.esc="modal = false") should fix the issue. Please let us know if it works. Best regardsMike Barlow commented 5 years ago
Thanks Mikolaj, unfortunately it doesn't look like adding an
on:keyupevent to the mdb-modal works. If I put anon:keyuphandler in an input field it works fine, but it doesn't seem like the mdb-modal looks for keyup events (even tried adding it to the<a>tag in the header with no luck. For some reason the contents of the mdb-modal-header doesn't seem to be in the flow, even with a tabindex="0".