It's been a real struggle trying to figure out this issue. I have a v-dialog that contains a checkbox. When the checkbox is clicked, a confirm() method is triggered to open a dialog in the browser to confirm the selection.
After confirming, the checkbox doesn't change visually, but the value of 'override' does. Clicking it again flips the 'override' value, causing confusion.
If 'cancel' is clicked, no changes occur.
I'm feeling quite lost at the moment and have been searching for solutions, coming across the idea of using click.native.
Previously, without the click.native.capture, no attempt to stop the action was made. I believe the solution lies in handling the stop request properly.
<v-checkbox
ref="checkbox"
dense
:value="override"
@click.native.capture="showConfirmationDialog($event)"
class="pa-0 pl-5 ma-0 mt-3"
label="Manually apply sale Price. WARNING: Will turn off auto updates."
></v-checkbox>
and the method:
showConfirmationDialog(event) {
if (!this.override) {
const result = confirm(
'The action you are requesting will remove this product from automatic payment adjustments and information. You will need to re-apply the item in order to turn this back on. Are you sure you wish to continue?'
);
if (result) {
this.override = true;
} else {
event.preventDefault();
event.stopPropagation();
}
} else {
this.override = false;
}
}