Vue-material: [MdDialog] wrapping the content in an element breaks UI
Just wanted to wrap my md-dialog-content around a <form> element
so that the buttons in md-dialog-actions would trigger the submit event.
There are grate benefits with form element that gives constraint validation to the form.
I think they are useful and think promps should wrap it in a form element also
<md-dialog :md-active.sync="show" @md-closed="closed">
<form submit.prevent="updateSettings">
<md-dialog-title>Settings</md-dialog-title>
<md-dialog-content>
...
</md-dialog-content>
<md-dialog-actions>
<md-button type="submit" class="md-primary">save</md-button>
</md-dialog-actions>
</form>
</md-dialog>
But this breaks the UI.
just having the form in dialog content won't help the buttons that are outside.
Are the any workarounds for this?
Will you fix this?
(wished md-dialog was built on native html dialog)
jimmywarting
All 9 comments
One workaround is the form attribute: https://www.w3schools.com/tags/att_input_form.asp
lucasfernog
on 23 Feb 2018
You can maybe try something like this
<md-dialog :md-active.sync="show" @md-closed="closed">
<md-dialog-title>Settings</md-dialog-title>
<md-dialog-content>
<form ref="myForm" @submit.prevent="updateSettings">
...
</form>
</md-dialog-content>
<md-dialog-actions>
<md-button class="md-primary" @click="$refs.myForm.submit()">save</md-button>
</md-dialog-actions>
</md-dialog>
Samuell1
on 24 Feb 2018
@jimmywarting or you can use without form and simply add @click="updateSettings" on button
Samuell1
on 24 Feb 2018
No, constraint validation don't kick in if you use onclick. Only on submit. And submit event can catch stuff like a button click can't do. Like pressing enter on the keyboard
edit: using @click="$refs.myForm.submit() will directly submit the form. It won't cause the submit event, doze never triggering the @supmit.prevent="updateSettings" action
I consider using onclick to handle submissions as a bad practice for several reasons.
and having fields without a from is also bad practice.
jimmywarting
on 24 Feb 2018
How would you feel about re-building the dialog element in order to use native dialog?
<dialog :open.sync="show" @close @cancel>
<form method="dialog">
<md-dialog-title>
<md-dialog-content>
<md-dialog-actions>
</form>
</dialog>
Solves another issue about autofocus that i'm after too
jimmywarting
on 25 Feb 2018
@jimmywarting native dialog element needs polyfills - https://caniuse.com/#search=dialog
Samuell1
on 25 Feb 2018
I know, I'm considering building my own componenet and including that polyfill from GoogleChrome. cuz i don't really like the way <md-dialog> works right now... problems with scroll in backgrounnd, having a form around the hole content, and autofocus ain't working so well either.
jimmywarting
on 25 Feb 2018
@jimmywarting yes but that polyfill have one big limitation
The major limitation of the polyfill is that dialogs should not have parents that create a stacking context. The easiest way to solve this is to move your
<dialog>element to be a child of<body>.
Samuell1
on 28 Feb 2018
@jimmywarting I tried to fix it with slots but i found better solution just simply put this CSS in your project
your code + this css and all works fine
.md-dialog-container form {
display: flex;
flex-flow: column;
flex: 1;
}
Related issues
xinzhanguo
路
3Comments
Leshgan
路
3Comments
maryleloisa
路
3Comments
alexMugen
路
3Comments
delueg
路
3Comments