diff --git a/dashboard/src/views/VolumesView.vue b/dashboard/src/views/VolumesView.vue index 74492a54d..c37aba101 100644 --- a/dashboard/src/views/VolumesView.vue +++ b/dashboard/src/views/VolumesView.vue @@ -74,11 +74,11 @@ const volumeDialogData = ref({ }); const form = useTemplateRef('form'); -const volumeDialogIsValid = ref(false); -function volumeDialogValid() { - function checkValidity() { - if (form.value && !form.value.checkValidity()) return false; +const isFormValid = ref(false); +function checkValidity() { + isFormValid.value = form.value ? form.value.checkValidity() : false; + function checkData() { const data = volumeDialogData.value; switch (data.mountType) { @@ -115,7 +115,9 @@ function volumeDialogValid() { return true; } - volumeDialogIsValid.value = checkValidity(); + if (isFormValid.value) { + isFormValid.value = checkData(); + } } async function refresh() { @@ -177,6 +179,8 @@ async function openVolumeDialog(volume) { volumeDialogData.value.xfsBlockDevices = xfsBlockDevices; volumeDialog.value.open(); + + setTimeout(checkValidity, 100); // update state of the confirm button } async function onSubmit() { @@ -278,13 +282,13 @@ onMounted(async () =>{ :reject-label="$t('main.dialog.cancel')" reject-style="secondary" :confirm-label="volumeDialogData.mode === 'edit' ? $t('main.dialog.save') : $t('main.action.add')" - :confirm-active="!volumeDialogData.busy && volumeDialogIsValid" + :confirm-active="!volumeDialogData.busy && isFormValid" :confirm-busy="volumeDialogData.busy" @confirm="onSubmit()" > -
+
- +
{{ volumeDialogData.error }}