Disabling the escape key handler

[dennmat-hurdle]

Problem:

Looking for a way to be able to disable the escape key handler while maintaining the ability to click to close.

Right now it seems the only way to prevent the modal from listening for the escape key is by setting click to close to false.
I've got a system already in place I can leverage to handle closing the correct modal but I can't get around this listener currently without losing the click to close behavior.

Consider the case of multiple modals open. If you press escape to close the front most one it will close all of them, which I'd imagine isn't the behavior generally expected.

I'd be willing to make a change and pull request that would alter the behavior to this (if agreed upon):

• Click to close remains as an option and will be restricted only to what it says. Clicking to close. And would not bind the escape key by default.
• Another prop would be added to toggle binding of the escape key to close the modal. Something like escapeToClose to keep the naming similar. It could default to the value of clickToClose which would mean the overall effect of the change would not be noticed end users. And they would instead need to specify escape to close to be false.

I'd also be willing to take the time to implement a potentially better solution if someone more familiar with the code base has a better idea of how to tackle this. From a quick glance it seems like this could be built in to dynamic modals(where vue-js-modal could intelligently close the correct modal on escape) but would fall apart if mixed with static ones.

Let me know, also feel free to let me know if I've missed something glaringly obvious that would provide the behavior I'm looking for

[Gransfall]

Hi @dennmat-hurdle,

Did you find a solution ? I'm struggled with that behavior too

[dennmat-hurdle]

I didn't find a workaround to fix this unfortunately.

I ended up changing the behavior of the UI to accommodate this for now but with no reply on this I didn't want to go through making a PR that would likely just sit there as I don't want to fork this and have a version that is stale.

I'm thinking this may be unmaintained at this point so down the line I'll be looking at finding one still in development. I don't have the time to take on maintaining this unfortunately, but I'd be glad to contribute if it were still maintained.

There are 'hacky' solutions you could employ, like always setting clickToClose false and then using JS that watches for dom changes to find whenever a modal is open and then listen for click events yourself there while separately handling key listeners for escape but it's a bit hacky and adds a lot of mental overhead to the codebase for the return I think. So the preferable solution would be the smaller change to the library.

[Gransfall]

Hi,

Thanks for your response,
I've find an hacky way. Not Perfect but can be useful to someone.

Basically, you must :

• set : clickToClose to false
• use @opened library function
• set a ref attribute to focus your first field on the modal (if not escape key will not working)
• bind escape key on the first div on the modal to call a closing function

<modal name="form-modal" :height="'auto'" :width="1600" :shiftY="0" :scrollable="true" :clickToClose="false" @opened="opened" >
        <div class="modal-mp" @keyup.esc="closeModalForm" ...
        
        <input class="form-control" ref="field-name" ....

opened(){
            this.$refs["field-name"].focus();
        }

closeModalForm(){
            this.$modal.hide('form-modal');
        },

After, like you say, the best is maybe to switch the library :/