From 98f4517818b5e6b2b40e028555af735ced354107 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Tue, 2 Apr 2024 12:15:06 +0200
Subject: [PATCH] FIX: body scroll lock textarea (#26462)

We need to scroll lock textareas when the keyboard is visible, otherwise they might become unusable if another element is body scroll locked on the page (eg: channels messages).

Note this commit is also slightly simplifying the code.
---
 .../discourse/components/chat-composer.hbs     |  3 +--
 .../discourse/components/chat-composer.js      | 18 +++++++++++++++---
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs
index ae22abd84ec..5571e7bf625 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs
@@ -60,8 +60,7 @@
             {{on "input" this.onInput}}
             {{on "keydown" this.onKeyDown}}
             {{on "focusin" this.onTextareaFocusIn}}
-            {{on "focusin" (fn this.computeIsFocused true)}}
-            {{on "focusout" (fn this.computeIsFocused false)}}
+            {{on "focusout" this.onTextareaFocusOut}}
             {{did-insert this.setupAutocomplete}}
             data-chat-composer-context={{this.context}}
           />
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-composer.js b/plugins/chat/assets/javascripts/discourse/components/chat-composer.js
index 6e5ed5de928..8c206856528 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-composer.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-composer.js
@@ -11,6 +11,10 @@ import { translations } from "pretty-text/emoji/data";
 import { Promise } from "rsvp";
 import InsertHyperlink from "discourse/components/modal/insert-hyperlink";
 import { SKIP } from "discourse/lib/autocomplete";
+import {
+  disableBodyScroll,
+  enableBodyScroll,
+} from "discourse/lib/body-scroll-lock";
 import { setupHashtagAutocomplete } from "discourse/lib/hashtag-autocomplete";
 import { emojiUrlFor } from "discourse/lib/text";
 import userSearch from "discourse/lib/user-search";
@@ -276,14 +280,22 @@ export default class ChatComposer extends Component {
   }
 
   @action
-  onTextareaFocusIn(textarea) {
+  onTextareaFocusOut(event) {
+    this.isFocused = false;
+    enableBodyScroll(event.target);
+  }
+
+  @action
+  onTextareaFocusIn(event) {
+    this.isFocused = true;
+    const textarea = event.target;
+    disableBodyScroll(textarea);
+
     if (!this.capabilities.isIOS) {
       return;
     }
 
     // hack to prevent the whole viewport to move on focus input
-    // we need access to native node
-    textarea = this.composer.textarea.textarea;
     textarea.style.transform = "translateY(-99999px)";
     textarea.focus();
     window.requestAnimationFrame(() => {