Form controls submit even when disconnected about shoelace HOT 8 CLOSED

This has been fixed in #1826 by making sure the controls are connected before appending them to form data. Tests have been added to prevent regressions.

from shoelace.

May be related to #1708

from shoelace.

The leak of form controls causes the <form> to retain the values of the removed form controls.

1. Have a <form> with three inputs A=1, B=2, C=3.
2. Call new FormData(form) and get A=1&B=2&C=3 as expected.
3. Remove inputs A and B from the form.
4. Call new FormData(form) again and get A=1&B=2&C=3 even though A and B got removed.
5. Remove input C from the form.
6. Call new FormData(form) again and get A=1&B=2. The input of C got removed. This is probably because the handleFormData listener is only removed for the last form control.

See this codepen for a demo: https://codepen.io/hbgl/pen/vYPxevY

from shoelace.

@claviska Thanks for the fix. There is still the issue of the memory leak that was not addressed by e231f8a. I would assume that for form-heavy SPAs this might be an issue.

from shoelace.

If I'm understanding what you're reporting, references to the detached form controls will be garbage collected if you're not using them. Browsers do this at their discretion, and we can't forcedly destroy them because it's common to disconnect and reconnect elements in the DOM.

If you're seeing long-lived elements that have been disconnected, make sure you don't have any references to them in variables, WeakMaps, etc.

from shoelace.

@claviska There seems to be some internal reference that keeps the form and the form controls alive. I removed the form control from the DOM and I have no other references, however, it is still not getting garbage collected. Eventually the browser tab will run out of memory. Here is a codepen to illustrate the issue:

https://codepen.io/hbgl/pen/mdoMzXj

from shoelace.

Feel free to open a fresh issue for this specific problem. I'm not seeing anything obvious in the form controller, but it's possible we missed something. We'll also want to compare it to other browsers to make sure it's not Chrome-related.

from shoelace.

@claviska Will do. After a quick test I can say that the memory leak also occurs in Firefox.

from shoelace.