Submit Button

[cartifon]

Hey!

I've been doing some tests with the web components, and looking into the button components, I saw that the abstract class Button is extending the buttonBaseClass and implementing FormSubmitter, and by default, the button is a 'submit'. type from FormSubmitterType.

If by default, all the buttons are submit type, would that mean that if I am in a form and press enter, the form should be submitted, right?

I am using an Angular v17 project and importing the web components there, if I have a simple button type submit, the form works just fine, but if I add the web-component button, it does not submit the form.

I have the imports necessary for the web-component, and it shows fine in the page, but it does not submit.

this is my HTML:

<form [formGroup]="myForm" onSubmit="alert('SubmitForm')">
  <div>
    <label for="fullName">Full Name:</label>
    <input type="text" id="fullName" formControlName="fullName" />
  </div>

  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" formControlName="email" />
  </div>

  <div>
    <label for="age">Age:</label>
    <input type="number" id="age" formControlName="age" />
  </div>

  <div>
    <md-filled-button> Submit </md-filled-button> <!--  This one does not work on 'enter' -->
    <md-filled-button type="submit" > Submit </md-filled-button> <!--  This one does not work on 'enter' either -->
    <button type="submit" >Submit</button> <!--  This one works -->
  </div>
</form>

Am I doing something wrong? (I hope so)

[datvm]

Not sure if it's due to Angular framework or not but it works pretty well for me: Lit Playground.

You can press Enter on the normal input and the form would get submitted. There is a known bug #4182 where <md-outlined-text-field> (and the filled version) does not submit the form on Enter though but it's not the <md-button>'s fault.

[cartifon]

Thank you for your answer, that is very interesting... I tried something similar to your example but with the event on the onsubmit and not as an event listening, and it did not work, it is here on this Lit Playground

[datvm]

That's interesting indeed! I found out that as soon as a 2nd <input> is added, this problem happens, for my example, it happens when I add another <input> and for your problem, if you remove one <input>, the Enter key works again.

[datvm]

So I noticed that the default button receives a click event when pressing Enter but not the md-button. As a result, you cannot even cancel the <md-button> click to prevent the form from submitting.

I guess it's either a browser bug or a bug in <md-button>

[asyncliz]

It's been a few years since I played with Angular forms, but I'm pretty sure the ng form stuff will prevent auto-submitting in favor of hooking into Angular form APIs.

[cartifon]

Even with just the Web Application, it doesn't submit on 'enter', on this Lit Playground you can change the buttons there if you add the button type submit and remove the other one, and then press 'enter' on the form, the form will be submitted.

[simonh1000]

I have a similar problem using Elm. My code reads

 Html.form
                [ class "inner"
                , onSubmit <| NewRestoSubmit elems.name
                ]
                [ mdOutlinedTextField "Restaurant name"
                    [ type_ "text"
                    , onInput NewRestoUpdateName
                    , name "resto"
                    , value elems.name
                    ]
                    []
                , mdButton [] [ text "Lookup" ]
                ]

and pressing enter in the text field does not cause a submit