FIX: chat height fixes (#21561)

- Correctly resize when sending a message on android
- Do not blur active element
- Update direct message creator height following changes

plugins/chat/assets/javascripts/discourse/components/chat-vh.js

@@ -15,7 +15,8 @@ export default class ChatVh extends Component {
     this._super(...arguments);
 
     if ("virtualKeyboard" in navigator) {
-      navigator.virtualKeyboard.overlaysContent = false;
+      navigator.virtualKeyboard.overlaysContent = true;
+      navigator.virtualKeyboard.addEventListener("geometrychange", this.setVH);
     }
 
     this.activeWindow = window.visualViewport || window;
@@ -28,6 +29,13 @@ export default class ChatVh extends Component {
 
     this.activeWindow?.removeEventListener("resize", this.setVH);
     lastVH = null;
+
+    if ("virtualKeyboard" in navigator) {
+      navigator.virtualKeyboard.removeEventListener(
+        "geometrychange",
+        this.setVH
+      );
+    }
   }
 
   @bind
@@ -36,14 +44,20 @@ export default class ChatVh extends Component {
       return;
     }
 
-    const vh = (this.activeWindow?.height || window.innerHeight) * 0.01;
+    let height;
+    if ("virtualKeyboard" in navigator) {
+      height =
+        window.visualViewport.height -
+        navigator.virtualKeyboard.boundingRect.height;
+    } else {
+      height = this.activeWindow?.height || window.innerHeight;
+    }
+
+    const vh = height * 0.01;
 
     if (lastVH === vh) {
       return;
-    } else if (this.capabilities.touch && lastVH < vh && vh - lastVH > 1) {
-      this.#blurActiveElement();
     }
-
     lastVH = vh;
 
     document.documentElement.style.setProperty(CSS_VAR, `${vh}px`);

plugins/chat/assets/javascripts/discourse/components/direct-message-creator.hbs

@@ -9,6 +9,8 @@
     class="direct-message-creator"
     {{did-insert this.setDirectMessageCreatorHeight}}
     {{will-destroy this.unsetDirectMessageCreatorHeight}}
+    {{did-update this.setDirectMessageCreatorHeight this.selectedUsers}}
+    {{did-update this.setDirectMessageCreatorHeight this.users}}
   >
     <div
       class="filter-area {{if this.isFilterFocused 'is-focused'}}"

plugins/chat/assets/stylesheets/common/base-common.scss

@@ -8,6 +8,14 @@ $float-height: 530px;
   --chat-header-offset: 50px;
 }
 
+// Very specific hack to ensure the contextual menu (copy/paste/...) is
+// not completly over the textarea, the rules to position this menu are quite obscure
+// and under DiscourseHUB the space between the textarea and the keyboard is so small that
+// it sometimes prefer to appear on top of the textarea, making any gesture very complicated
+html.ios-device.keyboard-visible body #main-outlet .full-page-chat {
+  padding-bottom: 0.2rem;
+}
+
 .chat-message-move-to-channel-modal-modal {
   .modal-inner-container {
     .chat-move-message-channel-chooser {