How to make an expandable input form for chat

Question

I've searched all over for a way to expand a text input form vertically like they do on modern chat app.

Everyone says that we should use textarea as the form input doesn't allow multi line but slack and spectrum are using forms... (discord use text-area though)

I would like to start with one line, and as user enter line break (shift + enter) the input expand to the top.

.chat-footer {
  display: grid;
  grid-template-rows: 90vh max-content;
  height: 100%;
  background-color: var(--color-i-bg);
  grid-area: i;
  border-top: 1px solid #ddd;
  border-top: var(--color-i-border-top);
  padding-bottom: 1rem;
}
.chat-footer__form {
  align-self: end;
  display: grid;
  grid-row: 2 / 3;
  grid-template-columns: 1fr max-content;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  white-space: normal;
  background: none;
  line-height: 1;
}
.chat-footer__form::placeholder {
  color: lightgrey;
  font-size: 1em;
}
.chat-footer__form-container-input {
  grid-column: 1/2;
}
.chat-footer__form-container-btn {
  grid-column: 2/3;
}
.chat-footer__form-input {
  width: 100%;
  height: 100%;
}
.chat-footer__form * > button {
  background-color: inherit;
  border: 0;
  line-height: normal;
}
.chat-footer__form * > button:hover {
  cursor: pointer;
}
.chat-footer__form * > button:focus, .chat-footer__form * > button:active {
  outline: 0;
}

 <div class="chat-footer">
        <form class="chat-footer__form" role="form">
            <div class="chat-footer__form-container-input">
                <input type="text" class="chat-footer__form-input" placeholder="New message">
            </div>
            <div class="chat-footer__form-container-btn">
                <button class="chat-footer__form-btn" id="form-attach">Attach</button>
                <button class="chat-footer__form-btn" id="form-smiley">Smiley</button>
            </div>
        </form>
    </div>

I'm not against using text-area if it's a better solution.

EDIT---

Finaly I used the solution with contenteditable="true" with overflow:auto; on my main container, and used the this for the placeholder:

&[placeholder]:empty:not(:focus):before {
    content: attr(placeholder);
}

This did the trick. Thanks all for your answers !

Answer 1

You can have a div (no input and no textarea) and use contenteditable="true" attribute:

<div contenteditable="true"></div>

Now when users click on the div, they can write things! exactly like an input. So you just need to listen for the events of this div and for example when user presses shift+enter add a <br> tag or create some paragraphs.

I checked slack input and they use the same technique. there are also some other attributes which you may want to use:

 autocomplete="off" autocorrect="off" spellcheck="true" aria-expanded="false" aria-autocomplete="list" aria-multiline="true" aria-label="Message" dir="auto" contenteditable="true" role="textbox"