Issue
I'm trying to use Vue to programmatically prevent an HTML dialog element's close event from closing the dialog. Here's the code I'm working with:
import {ref} from 'vue';
const dialogTemplateRef = ref();
//I want this toggle to prevent it from closing...
let preventClosing = true;
const closingHandler = function(event){
//...but it has no effect
if(preventClosing){
event.preventDefault();
}
}
<button @click="dialogTemplateRef.showModal()">open</button>
<dialog ref="dialogTemplateRef" @close="closingHandler">
<button @click="dialogTemplateRef.close()">close</button>
</dialog>
Using event.preventDefault()
fails to stop the dialog from closing. Using Vue's event modifiers like .stop
or .prevent
also appears to have no effect. Is this possible?
Solution
I discovered that this isn't possible. It's not related to Vue, but rather the HTML dialog element's close event. It turns out that the close event "is not cancelable and does not bubble."
Answered By - launchoverit
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.