Problem/Motivation
I picked up an issue on a client's website during development. After adding a couple of webforms to the site, I noticed that the confirmation modal did not work for all but one of the forms.
All of the affected forms were being overridden by custom webform-submission-form--[form-name].html.twig templates, where the {{ form }} token was commented out and individual fields were rendered in a custom layout instead.
My first thought was that I must be missing a token related to the confirmation message, but I searched far and wide, debugged the form array, but no luck.
Either there is something very clearly missed and I cannot see, or this is a bona fide bug and needs an extra pair of eyes on it.
Below is a step-by-step guide to reproduce the issue.
Steps to reproduce
1) Install latest Drupal (composer create-project drupal/recommended-project:10.1.6 "install-dir")
2) Install Bootstrap Barrio 5 Theme (composer require 'drupal/bootstrap_barrio:^5.5')
3) Enable Bootstrap Barrio 5 Theme and enable and set the Bootstrap Barrio Subtheme as default
4) Install Webform (composer require 'drupal/webform:^6.2')
5) Enable Webform and Webform UI
6) Navigate to /admin/structure/webform and edit the default contact form that ships with webform and do the following:
a) Go to Settings > General and tick the Use Ajax checkbox and click save
b) Go to Settings > Confirmation and select Modal as the confirmation type and click save
7) Navigate to /web/modules/contrib/webform/templates and copy webform-submission-form.html.twig
8) Navigate to /web/themes/contrib/bootstrap_barrio/subtheme/templates and paste webform-submission-form.html.twig
9) Rename webform-submission.html.twig to webform-submission-form--contact.html.twig
10) Edit webform-submission-form--contact.html.twig and do the following:
a) Comment out {{ form }}
b) Add the following code and save the file:
<div class="row">
<div class="col-md-6">
{{ form.elements.name }}
</div>
<div class="col-md-6">
{{ form.elements.email }}
</div>
</div>
<div class="row">
<div class="col-md-6">
{{ form.elements.subject }}
</div>
<div class="col-md-6">
{{ form.elements.message }}
</div>
</div>
{{ form.elements.actions }}
{{ form.form_build_id }}
{{ form.form_token }}
{{ form.form_id }}
11) Flush cache
12) Navigate to /webform/contact/test in the browser and click the submit button
13) The confirmation modal will fail to display
14) Navigate to /web/themes/contrib/bootstrap_barrio/subtheme/templates and edit webform-submission-form--contact.html.twig with the following:
a) Uncomment {{ form }} and comment out everything we added in step 10b above. Save the file
15) Flush cache
16) Navigate to /webform/contact/test in the browser and click the submit button once again
17) The confirmation modal works