Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Problem/Motivation
When filling out the register new user form, it should be possible to press enter to submit the form. Right now, this is not possible, if the form includes the "user picture" field (which it does by default in the standard profile). With javascript enabled, simply nothing happens.
This also has the added side effect that if you press enter without javascript enabled, the form gets submitted, but you don't get any error messages.
If i disable the user picture field, the form can be submitted with the enter key both with and without javascript enabled.
Some gifs attached to illustrate.
I looked quickly through the javascript, and it seems that because the element of the picture has the property element_settings.prevent set to click, it disables click, and everything stops working.
The preventing of click happens in ajax.js line 287.
I have not yet tested, but I assume this maybe also applies to all forms with file fields with ajax attached to them?Just tested. This applies to a node form with either file or image field attached also.
Proposed resolution
Not sure yet
Remaining tasks
Fix it :)
User interface changes
Not sure yet.
API changes
Hopefully none?
| Comment | File | Size | Author |
|---|---|---|---|
| #1 | register-no-js-pic.gif | 208.49 KB | eiriksm |
| #1 | register-no-js.gif | 366.08 KB | eiriksm |
Comments
Comment #1
eiriksmComment #2
eiriksmComment #3
eiriksmComment #4
nod_I'm afraid it's a "feature".
When hitting Enter in a form, the browser will look for the default button and "click" that. From the spec:
https://html.spec.whatwg.org/multipage/forms.html#implicit-submission
In the case where there is an image element, the default button is the upload field, not the form submit button. Unfortunately that upload field is also the one on which click is prevented.
All this is up to browsers and we shouldn't be messing with it in core. This is a won't fix for me.
Comment #5
eiriksmWhen I discovered this, I saw it on a user registration form. So I tried the user registration on Drupal 7 and pressed enter. That worked. So it seemed like a clear regression to me.
Now that I know this is actually because of the file field form I was able to reproduce this on Drupal 7 as well. So clearly not a regression. More maybe a "feature" then, I guess.
As for the wontfix. Well. I can think of at least a couple of hacks and workarounds for this. Some probably more hacky than others:
- Change the type of the input to button. This will unfortunately break uploading for no-js, so probably a bad idea.
- Change the type of the input to button with javascript. Very hacky, but this actually works. Does not break any existing functionality, only adds the possibility to press enter for js-users (most people).
- Prepend a hidden submit button before the first file button. So hacky.
- Instead of disabling click, try to observe the actual event and not blindly return false (did not try this).
That being said. All of these "solutions" could probably live in a contrib module. I was just writing the first few things that came to mind.
Thoughts?
Comment #6
nod_Pretty much agree with you.
Change type: no.
Change type with JS: no, I'm worried about a11y in that case. And who knows what browsers will do with the file input, better not get in their way.
Prepend hidden: no.
Observing event: there is no difference between an enter click and a click click. And that would mean redirecting a click to another button, not a fan.
Contrib +1
Comment #7
eiriksmI actually tested this. It works. But still, pretty hacky stuff. Regarding a11y, isnt being able to submit with enter also an a11y consideration? Not sure which is worse here.
Anyway, I'm going to close it as wont fix.
Comment #8
alexpottThis issue has an "interesting" effect.
Do the following:
I'm really really not sure what the correct solution is here or whether we want a solution but the behaviour is odd and very hard to explain to a user.
Comment #9
quietone CreditAttribution: quietone at PreviousNext commentedMoving to supported version.