Submitting preferences form with "enter" submits the form natively

On main discourse (61e0db0e80), when submitting the user preferences form with “enter” (e.g.: after changing the name), the form is sent natively.

This results in a GET request to the same page, and no change saved in database.

Steps to reproduce:

  1. Access the preference page
  2. Fill/change the name
  3. Hit enter
  4. Page gets reloaded.

I can not repro here on meta, just tried and it works as expected.

Can you verify here too please?

Sure, I was able to reproduce it in:

  • Firefox ESR v140.5.0esr - 64 bits in a clean profile (no plugins, no custom configuration)
  • Chromium v142.0.7444.175 with all plugins disabled

I’m running a Debian 13 and both browsers comes from the Debian repository.

1 Like

Very odd, I can’t repro in my browser (Firefox 45.0.2/Chromium: 143.0.7499.40)

When you say

That makes me think you’re not testing it on Meta?

FWIW I can repro here on meta :raised_hand:

When I enter my name and then press ‘enter’ it reloads the page and empties the value.

I’m assuming it didn’t/couldn’t save any changes as I didn’t get to press that button yet before it reloaded the page?

ETA: Appears to happen in both Firefox and Chrome (on desktop/windows)

1 Like

Ok, good to know. I wonder why I can’t repro :confused:

No idea :man_shrugging: :slight_smile:

But if you could repro, what would you be looking for? I can try again and see if I can provide you with the info.

ETA: I noticed that it briefly appends a ‘?’ to the url on reload, if that’s relevant?

1 Like

It is 100% reproducable in a clean dv environment.

On Chrome latest:

dv new enter-submit
http://enter-submit.localhost/session/user1/become
visit
http://enter-submit.localhost/u/user1/preferences/account
change name
click enter

Page reloads.

How are we feeling about something like this @martin / @j.jaffeux in /frontend/discourse/app/controllers/preferences.js:

      
    @action
    preventSubmit(event) {
       event?.preventDefault();
    }
    <form class="form-vertical" {{on "submit" this.preventSubmit}}>
       {{outlet}}
     </form>
   </section>

It is a bit odd that we have a form that is not really a form in this very specific case.

2 Likes

I meant “with all browser plugins disabled” (I use a bunch of things that can mess with a website’s original behavior)

I tested both on Meta, and in a clean brand new dev environment.

1 Like