height vs max-height vs line-height

components.chat-entry\.hbs

<div class="chat-entry-container">
  <div class="control">
   <button
      type='button'
      class='dropdown-trigger'
    >
      <FaIcon @icon='plus' />
    </button>
  </div>

  <form data-test-chat-entry-form="" class="chat-entry"
  {{on 'submit' (prevent-default this.sendMessage)}}>

		<div class="input-field">
			<label class="visually-hidden" for="the-input">
        Send a message to NullVoxPopuli
      </label>

      <textarea
        {{autofocus}}
        {{autoresize this.text}}
        {{on 'input' this.onInput}}
        {{on 'keypress' this.onKeyPress}}

        value={{this.text}}
        rows=1
        id='the-input'

        placeholder="This is a placeholder"
      />
  	</div>
  
    <button type='submit' class="button flex-grow" role="button">
      Send
    </button>
  </form>
</div>

components.chat-entry\.js

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action, set } from '@ember/object';

export default class ChatEntry extends Component {
  @tracked isDisabled = false;
  @tracked isSubmitDisabled = true;

  @action
  async sendMessage() {
    if (!this.text) return;

    this.isDisabled = true;

    await this.dispatchMessage(this.text);

    this.isDisabled = false;
    this.updateText('');
  }

  @action
  updateText(text) {
    set(this, 'text', text);

    this.isSubmitDisabled = this.isDisabled || !text || text.length === 0;
  }

  @action
  onInput(event) {
    const value = (event.target).value;
    this.updateText(value);
  }

  @action
  onKeyPress(event) {
    const { keyCode, shiftKey } = event;

    // don't submit when shift is being held.
    if (!shiftKey && keyCode === 13) {
      // non-blocking
      // eslint-disable-next-line @typescript-eslint/no-floating-promises
      this.sendMessage();

      // prevent regular 'Enter' from inserting a linebreak
      return false;
    }

    return true;
  }

  async dispatchMessage(text) {
    this.args.onUpdate(text);
    //await waitForPromise(this.messageDispatcher.send(text, this.args.to));
  }
}

controllers.application\.js

import Controller from '@ember/controller';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';

export default class ApplicationController extends Controller {
  @tracked foo = '';

  @action updateFoo(text) {
    this.foo = text; 
  }
}

helpers.prevent-default\.js

import { helper } from '@ember/component/helper';

export default helper(function preventDefault([fn]/*, hash*/) {
  return (...args) => {
    const firstArg = args[0];

    if (firstArg && firstArg.preventDefault) {
      firstArg.preventDefault();
    }

    return fn(...args);
  };
});

styles.app\.css

:root {
  /* colors */

  /* NOTE: luminosity of border colors is half of background color */

  /* TODO: switch all colors to HSL */
  --color-purple: hsl(253, 84%, 53%);
  --color-red: hsl(348, 100%, 46%);
  --color-green: hsl(144, 100%, 33%);
  --color-blue: hsl(208, 100%, 43%);
  --color-yellow: hsl(28, 100%, 55%);

  /* grays */
  --color-gray: hsl(240, 14%, 23%);
  --color-medium-gray: hsl(0, 0%, 33%);
  --color-medium-light-gray: hsl(0, 0%, 76%);
  --color-light-gray: hsl(0, 0%, 94%);

  /* states */
  --state-primary: var(--color-purple);
  --state-info: var(--color-blue);
  --state-success: var(--color-green);
  --state-warning: var(--color-yellow);

  /* shadows */
  --shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
  --shadow-lg:
    0 0 4px rgba(0, 0, 0, 0.1),
    0 4px 16px rgba(0, 0, 0, 0.1),
    0 16px 64px rgba(0, 0, 0, 0.1);

  /* grid */
  --grid-gap: 0.75rem;
  --grid-gap-small: 0.5rem;
  --grid-gap-tiny: 0.25rem;

  /* the rest of the things */
  --link-color: var(--state-dark);
  --placeholder-color: var(--color-medium-light-gray);
  --body-color-muted: var(--color-medium-light-gray);
  --hint-color: var(--color-medium-gray);

  /* chat */
  --chat-entry-bg-color: #f3f3f3;
  --chat-entry-line-height: 1.5rem;
  --chat-message-hover-color: #f8f8f8;
  --chat-message-unread-bg-color: #f1f1fa;
  --chat-message-sender-name-incoming: var(--body-color);
  --chat-message-sender-name-outgoing: var(--body-color);
  --chat-message-sent-at: var(--color-medium-gray);
  --chat-new-messages-notice-color: var(--state-light);
  --chat-new-messages-notice-bg-color: var(--state-secondary);
}

* {
  box-sizing: border-box;
}

body,
html {
  width: 100%;
  height: 100%;
  height: 100vh;
}


.visually-hidden {
  position: absolute;
  left: -1000px;
  top: -100px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.flex-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flex-grow {
 flex-grow: 1; 
}

.chat-entry-container {
  display: grid;
  grid-gap: var(--grid-gap);
  justify-content: stretch;
  align-items: center;

  background: var(--chat-entry-bg-color);
  border-radius: var(--component-border-radius);
  padding: var(--grid-gap);
  box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.2);
  grid-template-columns: auto 1fr auto;
}
.chat-entry-container .dropdown-trigger::after {
 display: none; 
}

.chat-entry {
  display: grid;
  grid-gap: var(--grid-gap);
  justify-content: stretch;
  align-items: center;
  grid-template-columns: 1fr auto;
}

.chat-entry .input-field {
  margin: 0;
}

.chat-entry textarea {
  border: none;
  background: transparent;
  box-shadow: none;
  resize: none;
  line-height: var(--chat-entry-line-height);
  box-sizing: border-box;
  height: var(--chat-entry-line-height); /* inital */
  max-height: 12rem; /* 10x line-height */

  /* required for line breaks to render correctly during authoring */
  white-space: pre-wrap;
}

templates.application\.hbs

<link rel="stylesheet" href="https://cdn.shoelace.style/1.0.0-beta.25/shoelace.css">

Demonstration of <a href="https://github.com/jelhan/ember-autoresize-modifier/issues/36" target="_blank">
ember-autosize-modifier#36</a>
<br>
And https://emberclear.io (as of 2020-06-06)
<br><br>

<ChatEntry @onUpdate={{this.updateFoo}} />

<hr>
text: {{this.foo}}

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1",
    "@fortawesome/free-brands-svg-icons": "5.13.0",
    "@fortawesome/free-solid-svg-icons": "5.13.0"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-autofocus-modifier": "1.0.1",
    "ember-autostash-modifier": "0.1.20",
    "ember-autoresize-modifier": "0.2.1",
    "@fortawesome/ember-fontawesome": "0.2.1"
  }
}