Problem/Motivation

Forms in Drupal typically use <input type="submit"> for any kind of form buttons.
Sadly these are not very flexible for styling, so they for example don't allow pseudo-elements (::before, :::after) e.g. to show icons and other things that may be needed for styling.

This core issue discusses the need to <button type="submit"> instead or as more flexible alternative.
https://www.drupal.org/project/drupal/issues/1671190
Both are valid alternatives for form submits.

In contrast to <input> a <button> does not have a value, but content.

Now the issue:
Both work in webform until you place a file element in the webform.
Then submit functionality is broken, see below.

Steps to reproduce

  1. Create a form with a file upload element
  2. Override the template for the submit button to use a <button>
  3. Adding file works great, but submitting the form reloads the page without submitting the form

Please note that the file upload button is still a regular input, also in this case!

Proposed resolution

Find the root cause and make forms with a file element also work with <button>

Remaining tasks

  1. Discuss
  2. Implement
  3. Test
  4. Release

User interface changes

None

API changes

None

Data model changes

None

Comments

anybody created an issue. See original summary.

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented
Issue summary: View changes

Unsure if this should be seen as bug (if button should work with this), so I created this as Feature request.

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented
Issue summary: View changes
thomas.frobieter’s picture

thomas.frobieter
Primary language German
Location EU
commented

I just removed our override:

input--submit--webform.html.twig:

{# Extract the text from the 'value' attribute to use as inner button text #}
{% set button_text = attributes.value %}

{# Remove the 'value' attribute and print all remaining attributes (including all classes) #}
<button{{ attributes.removeAttribute('value') }} type="submit">
  <span>{{ button_text }}</span>
</button>

And it started working again. So, this override is the cause.

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented

Thanks for the technical details @thomas.frobieter!

@maintainers: Do you see a chance to make this work and do you have an idea how? We'd of course like to help to implement the fix.

liam morland’s picture

liam morland
Primary language English
Location Ontario, CA 🇨🇦
commented

Webform would likely follow what Drupal core does. In the meantime, you can probably do what you need with template overrides and preprocess. That would allow you to test out different ways of doing it to develop a general solution for Webform.

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented

@liam morland thank you very much!! The problem is that there's no fitting theme hook suggestion to at least not override the affected form.

Would you be generally against support for both button types, if that's possible? So once core implements this, we'd already support this and even before?

Then I'd like to ask our team to take a look.

liam morland’s picture

liam morland
Primary language English
Location Ontario, CA 🇨🇦
commented

I could imagine supporting both if there is a good reason. I lean towards following Drupal core on this sort of thing. Another option would be to change something about the theming to make it easier to override. I haven't reviewed the relevant code so I don't know what change that might be.

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented

@thomas.frobieter I just recognized this part of the code example:

{# Remove the 'value' attribute and print all remaining attributes (including all classes) #}
<button{{ attributes.removeAttribute('value') }} type="submit">

and I think that's the key point causing the issue.

See https://www.w3schools.com/tags/att_button_value.asp

Because of the missing value the Form API (esp. the file element) can't detect which button has been clicked using triggering_element

It may need
name="op" as additional attribute to work, if not present by default. But I think it's already in the attributes!

Could you give it a try?

The visible value is kept, but the value attribute is sent, so I think the implementation is just wrong - any idea why done that way?

99% sure this will be fine then and nothing to do in webform. Sorry I didn't see that before.

thomas.frobieter’s picture

thomas.frobieter
Primary language German
Location EU
commented
Status: Active » Closed (won't fix)

All right, I was pretty sure that "value" is an invalid attribute for the button element. It's not.

So the button needs the name and value attributes to work correctly.

Sorry for wasting your time!

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.