Disabling the escape key handler about vue-js-modal HOT 3 OPEN

Hi @dennmat-hurdle,

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

from vue-js-modal.

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.

from vue-js-modal.

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 :/

from vue-js-modal.