CMS form data is not cleared from local storage after form is submitted

[hype09]

PHP Version

8.2

Shopware Version

6.6.2.0

Expected behaviour

When the CMS contact form is filled out and submitted, I expect that the local storage that preserves the entered information is cleared and not shown to me again when I reload the page.

Actual behaviour

Currently, when I enter information into the contact form and submit, the form data is not cleared from local storage. If I navigate to the contact form page again (or re-open the contact form modal, if its embedded in one), the data that I previously entered and that was successfully submitted is still there.

How to reproduce

1. Go to CMS contact form page / open CMS contact form modal
2. Enter all required information and click on the "submit" button
3. Navigate away from the page
4. Navigate to the form page / modal again
5. The submitted content is still there.

---

I believe the issue might have been introduced here, when support for the form-preserver plugin was added to the CMS contact form: aaa738d#diff-9ed3eaf8c4406035ef8cfe06470d5153e89e6e7c0b76b9f5c7337bce6361ee74R5

The form preserver plugin binds itself to the submit event of the underlying form:

shopware/src/Storefront/Resources/app/storefront/src/plugin/forms/form-preserver.plugin.js

Line 232 in 66e2069

this.el.addEventListener('submit', this._onSubmit.bind(this));

However, the CMS form does an event.preventDefault() before it submits the data through AJAX:

shopware/src/Storefront/Resources/app/storefront/src/plugin/forms/form-cms-handler.plugin.js

Line 62 in 66e2069

event.preventDefault();

My assumption is that when the form is submitted, the form-preserver plugin never hears about it and thus never clears the localstorage cache.

[shopware-issue-bot]

We found the following existing issues which may help or are related to your topic:

• Form preserver iterates through wrong elements
• Privacy policy does not correctly redirect back to the form
• Dissapearing content in CMS editor
• CMS Page Editor Sidebar settings have no effect after page was saved
• Duplicating contact data results in empty form
• After an error in the registration form, the data is no longer displayed in full
• Contact form and privacy policy CMS widgets on top of each other lead to problems when closing
• Admin: Fields are not cleared after language switch
• contact form not working properly

[mitelg]

Maybe we can introduce an event, that other JS plugins can emit and the preserver plugin is listening to. so custom submit-like stuff could also be handled.

[hype09]

I think I might've found a way where we don't need a custom event: we can probably just use the native reset event on forms.

The AJAX form-cms-handler.plugin.js could trigger a form reset (this.el.reset()) after submission, which even makes some sense semantically... the form is submitted via AJAX, and then the form itself is reset.

The form-preserver.plugin.js can then just clear the local storage on both submit and reset (which kind-of makes sense in any case - if a form is reset, we probably don't want to keep the information in local storage, anyway).

This way, we'd keep both plugins nicely uncoupled - what do you think?