From b1aec54e4ccb94e2c3272e9d8a63fa996c770540 Mon Sep 17 00:00:00 2001
From: Icaro Motta <icaro.ldm@gmail.com>
Date: Tue, 23 May 2023 08:40:38 -0300
Subject: [PATCH] Fix composer height overflow with extra content (#15989)

Fixes the maximum height overflow of the composer when there are images and/or
link previews (any *extra content* as we call it in the code).

Fixes https://github.com/status-im/status-mobile/issues/15949

Cause: The bug happened because the on-focus event of the composer happens
before subscriptions arrive, and thus it uses the incorrect max-height.

Fix: The fix makes the animation values of height, last-height, and saved-height
be truncated based on the newest calculated max-height, and they happen in a
separate use-effect, outside of the on-focus event.
---
 .../contexts/chat/composer/effects.cljs         | 17 +++++++++++++++++
 .../contexts/chat/composer/handlers.cljs        |  5 +----
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/status_im2/contexts/chat/composer/effects.cljs b/src/status_im2/contexts/chat/composer/effects.cljs
index eb02bf253d..2439fae651 100644
--- a/src/status_im2/contexts/chat/composer/effects.cljs
+++ b/src/status_im2/contexts/chat/composer/effects.cljs
@@ -105,9 +105,26 @@
   (.remove ^js @keyboard-hide-listener)
   (.remove ^js @keyboard-frame-listener))
 
+(defn max-height-effect
+  [{:keys [focused?]}
+   {:keys [max-height]}
+   {:keys [height saved-height last-height]}]
+  (rn/use-effect
+   (fn []
+     ;; Some subscriptions can arrive after the composer if focused (esp. link
+     ;; previews), so we need to react to changes in `max-height` outside of the
+     ;; `on-focus` handler.
+     (when @focused?
+       (let [new-height (min max-height (reanimated/get-shared-value last-height))]
+         (reanimated/set-shared-value last-height new-height)
+         (reanimated/animate height new-height)
+         (reanimated/set-shared-value saved-height new-height))))
+   [max-height @focused?]))
+
 (defn initialize
   [props state animations {:keys [max-height] :as dimensions}
    {:keys [chat-input images link-previews? reply audio]}]
+  (max-height-effect state dimensions animations)
   (rn/use-effect
    (fn []
      (maximized-effect state animations dimensions chat-input)
diff --git a/src/status_im2/contexts/chat/composer/handlers.cljs b/src/status_im2/contexts/chat/composer/handlers.cljs
index 23c759f35a..e7f77f361d 100644
--- a/src/status_im2/contexts/chat/composer/handlers.cljs
+++ b/src/status_im2/contexts/chat/composer/handlers.cljs
@@ -14,13 +14,10 @@
 (defn focus
   [{:keys [input-ref] :as props}
    {:keys [text-value focused? lock-selection? saved-cursor-position gradient-z-index]}
-   {:keys [height saved-height last-height opacity background-y gradient-opacity container-opacity]
-    :as   animations}
+   {:keys [last-height opacity background-y gradient-opacity container-opacity] :as animations}
    {:keys [max-height] :as dimensions}]
   (reset! focused? true)
   (rf/dispatch [:chat.ui/set-input-focused true])
-  (reanimated/animate height (reanimated/get-shared-value last-height))
-  (reanimated/set-shared-value saved-height (reanimated/get-shared-value last-height))
   (reanimated/animate container-opacity 1)
   (when (> (reanimated/get-shared-value last-height) (* constants/background-threshold max-height))
     (reanimated/animate opacity 1)