sl-dialog child elements not appended to FormData

[thomp361]

Hello,

I know that shoelace is supposed to intercept form submit events and append data to the FormData object as necessary.

However, with an sl-dialog with child elements as seen below, the input does not get appended. Is there an easy way (that I am missing) to append a sl-dialog's child elements into FormData? Or do we have to do this manually?

<sl-dialog> <input id="txtTest" name="txtTest" value="1" type="hidden"> </sl-dialog>

[KonnorRogers]

Is there a <form> that is a parent of this dialog? I don't see this element hooked up to a form anywhere.

This seems to work as expected for me.

https://codepen.io/paramagicdev/pen/YzoRKLa?editors=1000

If your markup doesn't allow a <form> to wrap the elements, you can always provide a form attribute.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes

[thomp361]

Thanks for your help! Yes, there is a <form> but it is the parent of the <sl-dialog>

<form name="frmEdit"><sl-dialog> <input id="txtTest" name="txtTest" value="1" type="hidden"></sl-dialog></form>

Adding an explicit form attribute does seem to work

<form name="frmEdit"><sl-dialog> <input id="txtTest" name="txtTest" value="1" type="hidden" form="frmEdit"></sl-dialog></form>

Is there a way for the child elements to inherit the sl-dialog's parent form?

[KonnorRogers]

Forms are attached via id and not name

<form><sl-dialog> <input id="txtTest" name="txtTest" value="1" type="hidden"></sl-dialog></form>

being the parent of sl-dialog is fine. That's how the codepen I linked works.

if the above doesn't work, could you please provide a codepen and the browser version it's not working in?

[thomp361]

Yes, sorry for the typo on the form attachment (id/name).

I found out what was causing the issue.

Our pages are submitted with the form.submit() method. form.submit() does not trigger the SubmitEvent which is the event Shoelace is listening to inject data into FormData.

Solutions are to submit using form.requestSubmit() as that triggers SubmitEvent. Or add the form attribute to the sl-dialog's child elements.

Thanks for your help!

[claviska]

Glad you worked it out. Keep in mind that we've moved to form-associated custom elements in the next version, so form controls will be first-class citizens soon!

[thomp361]

Thanks Corey, can't wait! Will shoelace be migrating to web awesome or remain separate projects?

[claviska]

Think of Web Awesome as Shoelace v3.