On screen keyboard issue

by thobson

HTML

<div class="page">
  <div class="header">
    header
  </div>

  <div class="outer">
    <div id="messages" class="inner">
      <div class="message">hello</div>
    </div>
  </div>

  <div class="footer">
    <input id="messageInput" type="text" placeholder="Enter your message" />
    <button id="send">send</button>
  </div>
</div>

<template id="messageTemplate">
  <div class="message"></div>
</template>

CSS

.page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header,
.footer {
  padding: 1rem;
  background-color: lightgrey;
  display: flex;
  flex-direction: row;
}

.outer {
  flex-grow: 1;
  display: flex;
  flex-direction: column-reverse;
  overflow-y: auto;
  /*overflow-y: hidden;*/
}

.inner {
  display: flex;
  flex-direction: column;
}

.message {
  padding: 1rem;
}

JavaScript

const messages = document.getElementById("messages");
  const input = document.getElementById("messageInput");
  const target = document.getElementById("send");
  const template = document.getElementById("messageTemplate");

  const pushMessage = () => {
    const clone = template.content.cloneNode(true);
    clone.querySelector("div.message").innerText = input.value;
    messages.appendChild(clone);
  }

  const keyUpHandler = (e) => {
    if (e.key === 'Enter') pushMessage()
  }

  target.addEventListener("click", pushMessage)
  input.addEventListener("keyup", keyUpHandler)