Material-components-web-components: typing ENTER in a mwc-textarea inside a mwc-dialog invokes the @click handler on the primaryAction button

[holgerengels]

* PLEASE READ THIS BEFORE FILING AN ISSUE *

I'm submitting a:

• [x] bug report
• [ ] feature request

What OS are you using?
kubuntu bionic

What browser(s) is this bug affecting:
chrome, firefox

Current behavior:
typing ENTER in a mwc-textarea inside a mwc-dialog invokes the @click handler on the primaryAction button

Expected behavior:
a \n should be inserted

Steps to reproduce:
put a mwc-textarea and a mwc-button into a mwc-dialog, have the button in the primaryAction slot. open the dialog, type ENTER inside the textarea. the @click handler of the button will be called

Related code:

import { html, css, LitElement } from 'lit-element';
import '@material/mwc-dialog';
import '@material/mwc-button';
import '@material/mwc-textarea';

export class PageOne extends LitElement {
  static get styles() {
    return css`
      :host { display: block; padding: 25px; }
    `;
  }

  firstUpdated(changedProperties) {
    this._dialog = this.shadowRoot.getElementById('dialog');
  }

  __show() {
    this._dialog.open = true;
  }

  render() {
    return html`
      <button @click=${this.__show}>show dialog</button>
      <mwc-dialog id="dialog" title="Dialog">
        <form>
          <mwc-textarea></mwc-textarea>
        </form>
        <mwc-button slot="primaryAction" @click=${this._save}>Speichern</mwc-button>
        </mwc-dialog>
    `;
  }

  _save() {
    console.log("save");
  }
}

[vdegenne]

I had the same issue. One way to prevent that is to capture the key event, check if it's the enter key and if it is stop the propagation.

[43081j]

FYI its this: https://github.com/material-components/material-components-web/blob/3cbee6dac7cafbe8986bad0a8593d870b00f5f32/packages/mdc-dialog/foundation.ts#L209

~not too sure what we could do other than not catch events specifically from textareas.~

can we just put mwc-textarea here?

[vdegenne]

Any updates regarding @43081j suggestion ?

I thought I'd give an update to my previous comment because I faced the same scenario and was stuck for a little while, the trick is to use stopImmediatePropagation.

In @holgerengels example

  firstUpdated(changedProperties) {
    this._dialog = this.shadowRoot.getElementById('dialog');
    this._dialog.addEventListener('keydown', e => {
      const TextArea = customElements.get('mwc-textarea')
      if (e.target instanceof TextArea) {
        e.stopImmediatePropagation()
      }
    })
  }

I don't think this is a good solution though.

[e111077]

Hello, we do not want to stop propagation from textarea since we want to make it act as closely to native input as possible. We also don't want to ignore specific elements as the names of the elements can change and instanceof checks are not free. We don't want to prescribe what should be inside the dialog content.

Stopping propagation should be the right way to do this. Here is a quick example of how I would do this:

render() {
  return html`
  <mwc-dialog>
    <mwc-textarea @keydown=${e => e.stopImmediatePropagation()}></mwc-textarea>
  </mwc-dialog>`
}