From a3522a5937396d7bc4ea6852d8bfd272d0bfbe3f Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Mon, 15 May 2023 22:00:03 +0200
Subject: [PATCH] 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
---
 .../discourse/components/chat-vh.js           | 24 +++++++++++++++----
 .../components/direct-message-creator.hbs     |  2 ++
 .../stylesheets/common/base-common.scss       |  8 +++++++
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-vh.js b/plugins/chat/assets/javascripts/discourse/components/chat-vh.js
index 952706fa5ca..546134aedb4 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-vh.js
+++ b/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`);
diff --git a/plugins/chat/assets/javascripts/discourse/components/direct-message-creator.hbs b/plugins/chat/assets/javascripts/discourse/components/direct-message-creator.hbs
index 57641f3e0ea..8936d297107 100644
--- a/plugins/chat/assets/javascripts/discourse/components/direct-message-creator.hbs
+++ b/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'}}"
diff --git a/plugins/chat/assets/stylesheets/common/base-common.scss b/plugins/chat/assets/stylesheets/common/base-common.scss
index d7b4f7c885e..e59eb9f5ec6 100644
--- a/plugins/chat/assets/stylesheets/common/base-common.scss
+++ b/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 {