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?