input web components not sending a form

[tiapnn]

Hello there! Simple question for you seniors developers:

I seem to be unable to send a form using wiredjs web components! The form tag doesn't take the input of the input fields for some reason..

Here's a link to the webpage if you want to inspect.

Here's the code:

<form action="mailto:[email protected]" method="post" enctype="text/plain">
    <wired-input type="text" id="name" placeholder="Enter name" name="name"></wired-input>
    <wired-button type="submit">Submit form</wired-button>
  </form>

Cheers

[pshihn]

It may not be supported at the moment out of the box. You may need to create the form data manually or perhaps add hidden fields in the form.

I will add some capability soon to make this happen automatically. Will need to do some research.

[Danny-Engelman]

If the element is in shadow DOM, then the creator of the element is responsible for providing values to a Form (or anything outside the element's shadowDOM)

• https://web.dev/more-capable-form-controls/
• https://www.google.com/search?q=Form-associated+custom+elements

You might also run into focus issues, which only Chredge can handle with non-standard delegateFocus for now: https://jsfiddle.net/CustomElementsExamples/9n6wtgj7/

[nileshtrivedi]

Shoelace solves this by handling the formdata event:

Every Shoelace component makes use of a shadow DOM to encapsulate markup, styles, and behavior. One caveat of this approach is that native <form> elements do not recognize form controls located inside a shadow root.

Shoelace solves this problem by using the formdata event, which is available in all modern browsers. This means, when a form is submitted, Shoelace form controls will automatically append their values to the FormData object that's used to submit the form. In most cases, things will "just work." However, if you're using a form serialization library, it might need to be adapted to recognize Shoelace form controls.