Contrib.social

Autosaving of entire form blocked by file fields

Open on Drupal.org →
Created on 1 December 2022, almost 2 years ago
Updated 24 January 2023, almost 2 years ago

Problem/Motivation

If a file field is in the form, webform autosave stops working if the file field is used. Not only does the content of the file field not autosave, but the content from every other field does not autosave after a file field has received input.

I thought that this was happening only for file fields being displayed as a button, but testing on a fresh install of Drupal, Webform and Webform Autosave shows this happening on every file field.

Steps to reproduce

Fresh installation of Drupal standard profile with Webform and Webform Autosave enabled (and all dependencies)

Create a webform with at least one file field and one text field. Need to have a private file path set to be able to add file fields. See example here:

text:
  '#type': textfield
  '#title': Text
file:
  '#type': managed_file
  '#title': File

Enable Webform Autosave for the webform under Settings.

Visit the webform.

Enter something in the text field. In a new browser tab, view the newly created webform submission via the Results page of webform admin and see that the text field content was autosaved.

Go back to the webform, upload a file using the file field. Go back to the admin view of the submission and see that the file field content was not autosaved.

Go back to the webform and change the contents of the text field. Go back to the admin view of the submission and see that the new text field content was also not autosaved.

Go back to the webform. Inspect the code and notice that the webformautosave hidden element still has its "active" class, something like:

<input formnovalidate="formnovalidate" class="webform-button--draft button js-form-submit form-submit is-disabled active" tabindex="-1" disabled="disabled" data-autosave-trigger="submit" data-drupal-selector="edit-webformautosave-hidden-save-draft" type="submit" id="edit-webformautosave-hidden-save-draft--vw6X_UXOiU0" name="op" value="Autosave Trigger" data-once="drupal-ajax">

This seems to indicate the ajaxComplete function that was supposed to remove it never ran. Testing reveals that the "active" class is added and not removed whenever a file field is used. Specifically $(store.submit).removeClass(store.activeClass); in webformautosave.js is never run.

Inspecting HTML confirms that the file field element is bound with the webformautosave ajax code. Looks like this:

<input data-drupal-selector="edit-file-upload" type="file" id="edit-file-upload" name="files[file]" size="22" class="js-form-file form-file form-element form-element--type-file form-element--api-file" data-once="webformAutosaveBehavior fileValidate auto-file-upload">

Proposed resolution

Force the ajaxComplete function to run after a file field is used.

Perhaps run some check on the form to make sure the hidden webformautosave element has its active class removed no matter what to prevent an error like this spilling over and stopping all elements from autosaving.

🐛 Bug report
Status

Fixed

Version

2.0

Component

Code

Created by

🇨🇦Canada endless_wander

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024