Pressing enter in a text field does not submit form

Hi! I've built a small form example:

<form method="GET">
  <md-outlined-text-field
    type="text"
    name="name"
  ></md-outlined-text-field>
  <md-filled-button label="Submit" type="submit"></md-filled-button>
</form>

But it does not submit in any of the following cases:

Click the Submit button
Press Enter key when the text field is focused
Press Enter key when the button is focused

I understand it's an issue related to shadow dom, but, is there a way to make this work as expected?

The button submission will be fixed in an upcoming PR.

Do native input text field submit forms on enter keypress? What happens if there are multiple?

@asyncliz

@asyncliz Yes, native input submits form when you press enter. Event if there are multiple. Please, keep native behaviour.

I've created a demo for submit and reset events. Submit buttons now work.

@Totati

@Totati I've tested your demo in Firefox and Chrome, it does work on Chrome but does not work on Firefox

You are right.

Updating issue title since it works on chrome

I believe what you're experiencing is a browser quirk when handling forms. Specifically, the Enter key will only submit when either:

There is only a single input in a form
There is the presence of an input or button with type=submit

As the Material buttons do not inherit from the HTMLButtonElement it's likely that browsers do not apply the above rules to them.

There is only a single input in a form

This is not true -> https://stackblitz.com/edit/js-raarmc Both in Chromium and Firefox the form gets submitted

There is the presence of an input or button with type=submit
As the Material buttons do not inherit from the HTMLButtonElement it's likely that browsers do not apply the above rules to them.

Yes, this is true, and they try to come around this by creating a submit button

This is not true -> https://stackblitz.com/edit/js-raarmc Both in Chromium and Firefox the form gets submitted

You added a button (type is submit by default) 😛

I see, I misunderstand you. A form with a single focused input can be submitted with enter even when there's no submit button. (Didn't know that!) Adding more inputs and the form won't submit anymore.

Will alert

<form onsubmit="event.preventDefault(); alert('submitted')">
  <label>Input one <input type="text" name="input1" /></label>
</form>

Won't alert

<form onsubmit="event.preventDefault(); alert('submitted')">
  <label>Input one <input type="text" name="input1" /></label>
  <label>Input two<input type="text" name="input2" /></label>
</form>

Will alert

<form onsubmit="event.preventDefault(); alert('submitted')">
  <label>Input one <input type="text" name="input1" /></label>
  <label>Input two<input type="text" name="input2" /></label>
  <button>Submit</button>
</form>

I have updated my demo for the reset and submit event.

further investigation here. Seems that the form does submit. It seems in FF the form.submitter value is not being set correctly. Since this issue is solved closing. For submitter issues please see #4949

@e111077

@e111077 The form does not submit for text-field in Chrome nor in FF. 🤷‍♂️ Could you provide an example where it works please? I'm interested what did I wrong in my reproduction.

sorry for the hasty close

Updated the title. Text fields do add their data to submitting forms, but pressing the enter key in a text field will not automatically submit its form right now. You'll need to add keydown listeners and handle that manually.

Also just in case it's relevant, a button in a trailing-icon slot should also submit the form. Currently pressing Enter on any element but text fields does submit the form. Clicking a button (including the one on the trailing-icon slot), pressing Enter on standard <input> and <button> all submit the form: https://jsfiddle.net/datvm/3h0k89do/2/

<form id="frm">
    <md-outlined-text-field autofocus class="txt-question w-100" name="q" data-loc-attr="label" data-loc-label="EnterQuestion">
        <md-icon slot="leading-icon">help</md-icon>
        <md-icon-button slot="trailing-icon">
            <md-icon>search</md-icon>
        </md-icon-button>
    </md-outlined-text-field>
    
    <input value="Normal input" />
    
    <button>
        Submit
    </button>
</form>

So the only problem now is to submit the form on pressing Enter on Material Text field.

a button in a trailing-icon slot should also submit the form

I don't think I agree from an a11y perspective. Icon buttons contained within a text field should have functionality tied to the text field itself, such as a clear button or a password visibility toggle.

It may be unexpected to have a form submit when using the enter key to trigger the icon button.

@asyncliz

@asyncliz that's a good point, thanks. I will fix my app by switching it to a separate button.

Still pressing Enter in the textfield should trigger the form submit. Currently I have to manually handle the textfield's keydown event.

Have the bug fixed? It still cannot work on the latest Chrome.

Have the bug fixed? It still cannot work on the latest Chrome.

Not yet, the issue is still open

Any update or wrokaround for this?

The workaround is to add a keypress listener and programmatically submit the form when the enter key is pressed.

Navigation Menu

Repository navigation

Pressing enter in a text field does not submit form #4182

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Pressing enter in a text field does not submit form #4182

Description

Activity

asyncliz commented on May 26, 2023

rarous commented on Aug 20, 2023

Totati commented on Sep 5, 2023

juanmarin-co commented on Sep 7, 2023

Totati commented on Sep 8, 2023

e111077 commented on Sep 17, 2023

austinw-fineart commented on Sep 18, 2023

Totati commented on Sep 18, 2023

austinw-fineart commented on Sep 18, 2023

Totati commented on Sep 18, 2023

e111077 commented on Sep 18, 2023

Totati commented on Sep 18, 2023

e111077 commented on Sep 18, 2023

asyncliz commented on Sep 18, 2023

datvm commented on Oct 4, 2023

asyncliz commented on Oct 4, 2023

datvm commented on Oct 4, 2023

mai1202 commented on Dec 20, 2023

asyncliz commented on Dec 20, 2023

therealabdi2 commented on Jun 14, 2025

asyncliz commented on Jun 15, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions