polymerweb-componentiron-form

Iron form not submitting on enter with paper input


I'm testing out using iron-form with custom elements. The issue I'm having is the form is not being submitted when I press enter. For example this form right here works on enter:

    <iron-form>
      <form id="loginForm">
        <paper-card heading="Welcome Back!" elevation="1" animated-shadow="true">
            <div class="card-content">
              <input type="text" label="Username" value="{{username}}">
              <input type="text" label="Password" value="{{password}}">
            </div>
            <div class="card-actions">
                <button disabled$="[[fetching]]" type="submit">Login</button>
            </div>
        </paper-card>
      </form>
    </iron-form>

I have an event listener in my connectedCallback method listening for the iron-form-presubmit event

        connectedCallback() {
          super.connectedCallback();

          this.addEventListener('iron-form-presubmit', function(event) {
            event.preventDefault();
            alert('working')
          });
        }

The issue is when I switch the html input elements to paper-input elements the form no longer submits on enter.

    <iron-form>
      <form id="loginForm">
        <paper-card heading="Welcome Back!" elevation="1" animated-shadow="true">
            <div class="card-content">
              <paper-input type="text" label="Username" value="{{username}}"></paper-input>
              <paper-input type="text" label="Password" value="{{password}}"></paper-input>
            </div>
            <div class="card-actions">
                <button disabled$="[[fetching]]" type="submit">Login</button>
            </div>
        </paper-card>
      </form>
    </iron-form>

Solution

  • You can use <iron-a11y-keys> to call a submit method when the [enter] key is pressed.

    <iron-a11y-keys target="loginForm" keys="enter" on-keys-pressed="submit"></iron-a11y-keys>
    <iron-form id="loginForm">
    ...
    </iron-form>
    

    In your custom element definition, add a method:

    submit: function () {
        this.$.loginForm.submit();
    }