Topic: Press "ESC" in an 'mdb-modal' does not close the modal.

Mike Barlow free asked 4 years ago

I have an application with a simple modal that I started with one of the standard example templates:

    <mdb-btn color="primary" @click.native="modal = true">Launch demo modal</mdb-btn>
    <mdb-modal :show="modal" @close="modal = false">
        <mdb-modal-title>Modal title</mdb-modal-title>
        <mdb-btn color="secondary" @click.native="modal = false">Close</mdb-btn>
        <mdb-btn color="primary">Save changes</mdb-btn>

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>

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
    <a data-v-13d1e037="" flat="" class="close">×</a>

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.

  <component :is="tag" :class="className">
    <a v-if="close" flat class="close" @click.prevent="away">&times;</a>

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)


Mikołaj Smoleński staff commented 4 years ago

Unfortunately it's a bug on our side. The esc keyboard access will be added soon. Best regards

Mikołaj Smoleński staff commented 4 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 regards

Mike Barlow free commented 4 years ago

Thanks Mikolaj, unfortunately it doesn't look like adding an on:keyup event to the mdb-modal works. If I put an on:keyup handler 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".

Mike Barlow free answered 4 years ago

Ok, I did find that by editing the mdb-modal component itself I can effect the change I want:

  <transition name="fade"
    <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">

Mikołaj Smoleński staff commented 4 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 free commented 4 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 4 years ago

You're right. The easiest way will be to add this event to the wrapper. Best regards

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.7.1
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: Yes
  • Provided link: Yes