Pressing enter in a text field does not submit form

[juanmarin-co]

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?

[asyncliz]

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?

[rarous]

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

[Totati]

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

[juanmarin-co]

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

[Totati]

You are right.

[e111077]

Updating issue title since it works on chrome

[austinw-fineart]

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.

[Totati]

• 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

[austinw-fineart]

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) 😛

[Totati]

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.

[e111077]

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

[Totati]

@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.

[e111077]

sorry for the hasty close

[asyncliz]

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.

[datvm]

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.

[asyncliz]

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.

[datvm]

@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.

[mai1202]

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

[asyncliz]

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

Not yet, the issue is still open

[therealabdi2]

Any update or wrokaround for this?

[asyncliz]

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