diff --git a/src/components/NcButton/NcButton.vue b/src/components/NcButton/NcButton.vue index a1d4a95734..7659573a47 100644 --- a/src/components/NcButton/NcButton.vue +++ b/src/components/NcButton/NcButton.vue @@ -686,9 +686,7 @@ export default defineComponent({ hasIcon ? h('span', { class: 'button-vue__icon', - attrs: { - 'aria-hidden': 'true', - }, + 'aria-hidden': 'true', }, [this.$slots.icon?.()], ) diff --git a/src/components/NcDialog/NcDialog.vue b/src/components/NcDialog/NcDialog.vue index 5db3d09ea6..579baea812 100644 --- a/src/components/NcDialog/NcDialog.vue +++ b/src/components/NcDialog/NcDialog.vue @@ -95,6 +95,7 @@ Note that this is not possible if the dialog contains a navigation! name="Choose a name" v-model:open="showDialog" @submit="currentName = newName" + @reset="newName = ''" @closing="newName = ''"> + @click="(_, result) => handleButtonClose(button, result)" /> @@ -383,7 +388,7 @@ export default defineComponent({ }, /** - * Optionally pass additionaly classes which will be set on the navigation for custom styling + * Optionally pass additional classes which will be set on the navigation for custom styling * @default '' * @example * ```html @@ -427,7 +432,7 @@ export default defineComponent({ }, /** - * Optionally pass additionaly classes which will be set on the content wrapper for custom styling + * Optionally pass additional classes which will be set on the content wrapper for custom styling * @default '' */ contentClasses: { @@ -437,7 +442,7 @@ export default defineComponent({ }, /** - * Optionally pass additionaly classes which will be set on the dialog itself + * Optionally pass additional classes which will be set on the dialog itself * (the default `class` attribute will be set on the modal wrapper) * @default '' */ @@ -516,6 +521,16 @@ export default defineComponent({ /** Forwarded HTMLFormElement submit event (only if `is-form` is set) */ emit('submit', event) }, + /** + * @param {Event} event Form submit event + */ + reset(event) { + event.preventDefault() + /** + * Forwarded HTMLFormElement reset event (only if `is-form` is set). + */ + emit('reset', event) + }, } : {}, ) @@ -528,12 +543,14 @@ export default defineComponent({ // Because NcModal does not emit `close` when show prop is changed /** * Handle clicking a dialog button -> should close - * @param {MouseEvent} event The click event + * @param {MouseEvent} button The button that was clicked * @param {unknown} result Result of the callback function */ - const handleButtonClose = (event, result) => { - // Skip close if invalid dialog - if (dialogTagName.value === 'form' && !dialogElement.value.reportValidity()) { + function handleButtonClose(button, result) { + // Skip close on submit if invalid dialog + if (button.nativeType === 'submit' + && dialogTagName.value === 'form' + && !dialogElement.value.reportValidity()) { return } handleClosing(result) diff --git a/src/components/NcDialogButton/NcDialogButton.vue b/src/components/NcDialogButton/NcDialogButton.vue index 609b13baa5..ad3b124fcc 100644 --- a/src/components/NcDialogButton/NcDialogButton.vue +++ b/src/components/NcDialogButton/NcDialogButton.vue @@ -28,16 +28,18 @@ Dialog button component used by NcDialog in the actions slot to display the butt