-
Notifications
You must be signed in to change notification settings - Fork 90
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(NcDialog): Allow to make the dialog a form #5932
Conversation
ba6cff3
to
b2d6973
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I love it!!!
/backport to next |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
.
const handleButtonClose = () => { | ||
// Skip close if invalid dialog | ||
if (dialogTagName.value === 'form' && !dialogElement.value.reportValidity()) { | ||
return | ||
} | ||
handleClosing() | ||
window.setTimeout(() => handleClosed(), 300) | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Note for future - it's more common case when a dialog button should not close it. This behavior forces to use custom buttons instead of dialog buttons.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe allow returning false
from the callback to prevent close?
This allows us to make simple small dialogs like asking for a password, asking for a filename or similar while having proper HTML semantics and native form validation. Co-authored-by: Grigorii K. Shartsev <[email protected]> Signed-off-by: Ferdinand Thiessen <[email protected]>
21edf30
to
1331abf
Compare
That is default and expected native validation: Only user input is validated not default values. |
Signed-off-by: Ferdinand Thiessen <[email protected]>
1331abf
to
1946683
Compare
☑️ Resolves
This allows us to make simple small dialogs like asking for a password, asking for a filename or similar while having proper HTML semantics and native form validation.
🖼️ Screenshots
Bildschirmaufnahme_20240806_195309.webm
🏁 Checklist
next
requested with a Vue 3 upgrade