Vue-js-modal: Press escape key to close modal

Created on 25 Sep 2017 · 10Comments · Source: euvl/vue-js-modal

It's quite difficult to support this without it being built in.

enhancement looks good to me todo

Source

diachedelic

Most helpful comment

Sorry I did not mean I'm showing more than one modal at one time. My project is not public, but here is an example:

<template>

  <div>
    <button @click="$modal.show('foo')">Show Foo</button>
    <button @click="$modal.show('bar')">Show Bar</button>

    <modal name="foo">Foo</modal>
    <modal name="bar">Bar</modal>
  </div>

</template>

<script>

export default {
  mounted() {
    document.body.addEventListener('keyup', e => {
      if (e.keyCode === 27) {
        this.$modal.??? // how to hide any open modal?
      }
    })
  }
}
</script>

diachedelic on 26 Sep 2017

👍11

All 10 comments

methods: {
  beforeOpen () {
    document.addEventListener('keyup', this.close)
  },

  beforeClose () {
    document.removeEventListener('keyup', this.close)
  },

  close (e) {
    if (e.keyCode === 27) this.$modal.hide('mymyodal') 
  }
}

does not look very difficult to me tbh.
p.s. didnt test, but something like this should work.

euvl on 25 Sep 2017

Also some use-cases require modals not being possible to close. For example, authentication requests.

I think you will have to support this behaviour manually.

euvl on 25 Sep 2017

In that scenario, I would expect clickToClose === false - and that should disable the esc key, right?

It is a difficult thing to support manually because vue-js-modal does not expose an API to determine which modals, or any, are currently shown. Upon capturing an esc key event, I don't think there's any method on $modal which closes all modals.

On 26 Sep 2017, at 2:11 am, Yev Vlasenko notifications@github.com wrote:

Also some use-cases require modals not being possible to close. For example, authentication requests.

I think you will have to support this behaviour manually.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/euvl/vue-js-modal/issues/90#issuecomment-331931721, or mute the thread https://github.com/notifications/unsubscribe-auth/AAS8wA2WnQUD-JTc1vGf7Wm0JikjLDSFks5sl9CngaJpZM4Pi7lO.

diachedelic on 26 Sep 2017

Interesting, is your project public, can I take a look? I did not think that showing more than one modal will actually work 😄

Its a fair point thatclickToClose can be responsible for ESC button, I will think about it.
Thanks

euvl on 26 Sep 2017

👍1

Sorry I did not mean I'm showing more than one modal at one time. My project is not public, but here is an example:

<template>

  <div>
    <button @click="$modal.show('foo')">Show Foo</button>
    <button @click="$modal.show('bar')">Show Bar</button>

    <modal name="foo">Foo</modal>
    <modal name="bar">Bar</modal>
  </div>

</template>

<script>

export default {
  mounted() {
    document.body.addEventListener('keyup', e => {
      if (e.keyCode === 27) {
        this.$modal.??? // how to hide any open modal?
      }
    })
  }
}
</script>

diachedelic on 26 Sep 2017

👍11

Good point, I will add it in one of the next releases.

euvl on 6 Oct 2017

👍8 ❤1

Publishing in 1.3.5

euvl on 19 Nov 2017

Sorry to revive this old issue, but I wanted to create one about splitting "clickToClose" and "close by ESC". Since the coupling seems to be a design decision, is that worthwhile?

anotherthomas on 24 Apr 2019

👍10

One up for @anotherthomas 's issue.

One example would be:

I want to keep the clickToClose functionality
I want to use ESC key events for elements within my open modal (in forms for example), and not have it close the modal whenever esc is pressed.

Or how would you do it currently?

danrocha on 11 Dec 2019

👍6

@danrocha The event being passed in through the before-close listener does not have the key attribute. Perhaps someone can do a pull request for this?