From 0c27baef765860fee8c99c57a656b79507a6f0dc Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Thu, 11 May 2023 16:12:48 +0200
Subject: [PATCH] FIX: keyboard on android (#21505)

---
 .../discourse/components/chat-vh.js           | 35 ++++++-------------
 1 file changed, 10 insertions(+), 25 deletions(-)

diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-vh.js b/plugins/chat/assets/javascripts/discourse/components/chat-vh.js
index e8decbf86a6..cadf8551027 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-vh.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-vh.js
@@ -3,7 +3,6 @@ import Component from "@ember/component";
 import isZoomed from "discourse/plugins/chat/discourse/lib/zoom-check";
 
 const CSS_VAR = "--chat-vh";
-let pendingUpdate = false;
 
 export default class ChatVh extends Component {
   tagName = "";
@@ -11,16 +10,16 @@ export default class ChatVh extends Component {
   didInsertElement() {
     this._super(...arguments);
 
+    this.setVHFromVisualViewPort();
+
     if ("virtualKeyboard" in navigator) {
-      this.setVHFromKeyboard();
+      navigator.virtualKeyboard.overlaysContent = true;
 
       navigator.virtualKeyboard.addEventListener(
         "geometrychange",
         this.setVHFromKeyboard
       );
     } else {
-      this.setVHFromVisualViewPort();
-
       (window?.visualViewport || window).addEventListener(
         "resize",
         this.setVHFromVisualViewPort
@@ -42,16 +41,10 @@ export default class ChatVh extends Component {
         this.setVHFromVisualViewPort
       );
     }
-
-    pendingUpdate = false;
   }
 
   @bind
   setVHFromKeyboard(event) {
-    if (pendingUpdate) {
-      return;
-    }
-
     if (this.isDestroying || this.isDestroyed) {
       return;
     }
@@ -60,24 +53,20 @@ export default class ChatVh extends Component {
       return;
     }
 
-    pendingUpdate = true;
-
     requestAnimationFrame(() => {
-      const { height } = event.target.boundingRect;
-      const vhInPixels =
-        ((window.visualViewport?.height || window.innerHeight) - height) * 0.01;
-      document.documentElement.style.setProperty(CSS_VAR, `${vhInPixels}px`);
+      requestAnimationFrame(() => {
+        const keyboardHeight = event.target.boundingRect.height;
+        const viewportHeight =
+          window.visualViewport?.height || window.innerHeight;
 
-      pendingUpdate = false;
+        const vhInPixels = (viewportHeight - keyboardHeight) * 0.01;
+        document.documentElement.style.setProperty(CSS_VAR, `${vhInPixels}px`);
+      });
     });
   }
 
   @bind
   setVHFromVisualViewPort() {
-    if (pendingUpdate) {
-      return;
-    }
-
     if (this.isDestroying || this.isDestroyed) {
       return;
     }
@@ -86,14 +75,10 @@ export default class ChatVh extends Component {
       return;
     }
 
-    pendingUpdate = true;
-
     requestAnimationFrame(() => {
       const vhInPixels =
         (window.visualViewport?.height || window.innerHeight) * 0.01;
       document.documentElement.style.setProperty(CSS_VAR, `${vhInPixels}px`);
-
-      pendingUpdate = false;
     });
   }
 }