fix: form attribute in button doesn't work and throws error

[claviska]

🐛 Bug Report

The documented form attribute on FAST Button is intended to mimic that of a native <button> by allowing the user to pass a form id, effectively reassigning its form owner.

This doesn't work in any browser I tested, and in Chromium results in the following error:

Uncaught DOMException: Failed to execute 'requestSubmit' on 'HTMLFormElement': The specified element is not owned by this form element.
    at pc.handleSubmission (https://unpkg.com/@microsoft/[email protected]/dist/fast-components.min.js:16:49579)
handleSubmission @ fast-components.min.js:16

Additionally, it appears as though other form-related attributes including formaction, formmethod, formtarget, etc. do not have any effect in any browser.

💻 Repro or Code Sample

https://jsfiddle.net/d690np3s/1/

🤔 Expected Behavior

In the repro above, the form should be submitted when the button is activated. The form should submit using a GET request to /get in a new tab/window.

😯 Current Behavior

Nothing happens and the aforementioned error is thrown.

💁 Possible Solution

I believe this is happening because the call to requestSubmit() is passing the proxy, but the proxy isn't understood to be "owned" by the form.

I know of two quick ways to solve this:

1. Add the form attribute to the proxy, e.g. this.proxy.setAttribute("form", this.form.id). ~~This appears to work fine, but relies on the form having an id. Otherwise, the fix will need to account for that by creating a unique id, linking it, and removing it after submission.~~
2. Append the proxy to the form before calling requestSubmit(), e.g. this.form.append(proxy), and restore its position as a child of the host element after submission.

However, an even better solution may be to rework the proxy logic so it's aware of linked forms and attaches the proxy to the form instead of the host element when a form attribute exists.

I'm happy to commit some of my team's bandwidth to this if we can get confirmation of the preferred solution.