Composer collapsing when editing canceled/done

src/status_im2/contexts/chat/composer/edit/view.cljs

@@ -11,7 +11,7 @@
     [utils.re-frame :as rf]))
 
 (defn edit-message
-  [state]
+  [{:keys [text-value input-ref]}]
   [rn/view
    {:style               style/container
     :accessibility-label :edit-message}
@@ -30,20 +30,18 @@
     {:size                24
      :icon-only?          true
      :accessibility-label :edit-cancel-button
-     :on-press            (fn []
-                            (utils/cancel-edit-message state)
-                            (rf/dispatch [:chat.ui/cancel-message-edit]))
+     :on-press            #(utils/cancel-edit-message text-value input-ref)
      :type                :outline}
     :i/close]])
 
 (defn- f-view
-  [state]
+  [props]
   (let [edit   (rf/sub [:chats/edit-message])
         height (reanimated/use-shared-value (if edit constants/edit-container-height 0))]
     (rn/use-effect #(reanimated/animate height (if edit constants/edit-container-height 0)) [edit])
     [reanimated/view {:style (reanimated/apply-animations-to-style {:height height} {})}
-     (when edit [edit-message state])]))
+     (when edit [edit-message props])]))
 
 (defn view
-  [state]
-  [:f> f-view state])
+  [props]
+  [:f> f-view props])

src/status_im2/contexts/chat/composer/gesture.cljs

@@ -43,8 +43,7 @@
     (reset! emoji-kb-extra-height nil))
   (reset! maximized? false)
   (rf/dispatch [:chat.ui/set-input-maximized false])
-  (when @input-ref
-    (.blur ^js @input-ref)))
+  (utils/blur-input input-ref))
 
 (defn bounce-back
   [{:keys [height saved-height opacity background-y]}
@@ -96,13 +95,13 @@
                                 max-height
                                 bounded-height
                                 saved-height))
-                 (when @input-ref ; sheet at min-height, collapse keyboard
-                   (.blur ^js @input-ref)))))))
+                 ; sheet at min-height, collapse keyboard
+                 (utils/blur-input input-ref))))))
         (gesture/on-end (fn []
                           (let [diff (- (reanimated/get-shared-value height)
                                         (reanimated/get-shared-value saved-height))]
                             (if @gesture-enabled?
-                              (if (>= diff 0)
+                              (if (and @expanding? (>= diff 0))
                                 (if (> diff constants/drag-threshold)
                                   (maximize state animations dimensions)
                                   (bounce-back animations dimensions starting-opacity))

src/status_im2/contexts/chat/composer/handlers.cljs

@@ -72,7 +72,7 @@
   "Save new text height, expand composer if possible, show background overlay if needed"
   [event
    {:keys [maximized? lock-layout? text-value]}
-   {:keys [height saved-height opacity background-y]}
+   {:keys [height saved-height last-height opacity background-y]}
    {:keys [content-height window-height max-height]}
    keyboard-shown]
   (when keyboard-shown
@@ -87,10 +87,11 @@
                                                     max-height)
           new-height   (min new-height max-height)]
       (reset! content-height content-size)
-      (when (utils/update-height? content-size height max-height maximized?)
+      (when (utils/update-height? content-size height max-height)
         (reanimated/animate height new-height)
+        (reanimated/set-shared-value last-height new-height)
         (reanimated/set-shared-value saved-height new-height))
-      (when (= new-height max-height)
+      (when (>= new-height max-height)
         (reset! maximized? true)
         (rf/dispatch [:chat.ui/set-input-maximized true]))
       (if (utils/show-background? max-height new-height maximized?)

src/status_im2/contexts/chat/composer/keyboard.cljs

@@ -4,7 +4,8 @@
     [react-native.async-storage :as async-storage]
     [react-native.core :as rn]
     [react-native.platform :as platform]
-    [react-native.reanimated :as reanimated]))
+    [react-native.reanimated :as reanimated]
+    [status-im2.contexts.chat.composer.utils :as utils]))
 
 (defn get-kb-height
   [curr-height default-height]
@@ -20,18 +21,28 @@
       (async-storage/set-item! :kb-default-height (str height)))))
 
 (defn handle-emoji-kb-ios
-  "Opening emoji KB on iOS while maximized will cause a flicker up and down. This method handles that."
+  "Opening emoji KB on iOS will cause a flicker up and down due to height differences.
+  This method handles that by adding the extra difference between the keyboards. When the input is
+  expanded to a point where the added difference will make the composer go beyond the screen causing a flicker,
+  we're subtracting the difference so it only reaches the allowed max-height. We're not animating these
+  changes to make it appear seamless during transitions between keyboard types when maximized."
   [event
    {:keys [emoji-kb-extra-height]}
    {:keys [text-value]}
    {:keys [height saved-height]}
    {:keys [max-height]}]
-  (let [start-h         (oops/oget event "startCoordinates.height")
-        end-h           (oops/oget event "endCoordinates.height")
-        diff            (- end-h start-h)
-        max-height-diff (- max-height diff)
-        curr-text       @text-value]
-    (if (> (reanimated/get-shared-value height) max-height-diff)
+  (let [start-h                  (oops/oget event "startCoordinates.height")
+        end-h                    (oops/oget event "endCoordinates.height")
+        diff                     (- end-h start-h)
+        max-height-diff          (- max-height diff)
+        curr-text                @text-value
+        almost-expanded?         (> (reanimated/get-shared-value height) max-height-diff)
+        ;; NOTE: the `keyboardWillChangeFrame` is dispatched sometimes when blurring (the input)
+        ;; with a diff of 103, which we don't want to react to as it causes the input to increase.
+        ;; 60 is an arbitrary number to avoid that, but still include the emoji keyboard difference
+        ;; (with some buffer).
+        smaller-than-emoji-diff? (< diff 60)]
+    (if (and almost-expanded? (pos? diff) smaller-than-emoji-diff?)
       (do
         (reanimated/set-shared-value height (- (reanimated/get-shared-value height) diff))
         (reanimated/set-shared-value saved-height (- (reanimated/get-shared-value saved-height) diff))
@@ -58,8 +69,8 @@
                                    #(handle-emoji-kb-ios % props state animations dimensions)))
   (reset! keyboard-hide-listener (.addListener rn/keyboard
                                                "keyboardDidHide"
-                                               #(when (and platform/android? @input-ref)
-                                                  (.blur ^js @input-ref)))))
+                                               #(when platform/android?
+                                                  (utils/blur-input input-ref)))))
 
 (defn handle-refocus-emoji-kb-ios
   [{:keys [saved-emoji-kb-extra-height]}

src/status_im2/contexts/chat/composer/utils.cljs

@@ -16,11 +16,10 @@
   (max min-v (min v max-v)))
 
 (defn update-height?
-  [content-size height max-height maximized?]
-  (when-not @maximized?
-    (let [diff (Math/abs (- content-size (reanimated/get-shared-value height)))]
-      (and (not= (reanimated/get-shared-value height) max-height)
-           (> diff constants/content-change-threshold)))))
+  [content-size height max-height]
+  (let [diff (Math/abs (- content-size (reanimated/get-shared-value height)))]
+    (and (not= (reanimated/get-shared-value height) max-height)
+         (> diff constants/content-change-threshold))))
 
 (defn show-top-gradient?
   [y lines max-lines gradient-opacity focused?]
@@ -100,10 +99,18 @@
        (not reply?)
        (not audio?)))
 
+(defn blur-input
+  [input-ref]
+  (when @input-ref
+    (rf/dispatch [:chat.ui/set-input-focused false])
+    (.blur ^js @input-ref)))
+
 (defn cancel-edit-message
-  [{:keys [text-value]}]
+  [text-value input-ref]
   (reset! text-value "")
-  (rf/dispatch [:chat.ui/set-input-content-height constants/input-height]))
+  (blur-input input-ref)
+  (rf/dispatch [:chat.ui/set-input-content-height constants/input-height])
+  (rf/dispatch [:chat.ui/cancel-message-edit]))
 
 (defn count-lines
   [s]

src/status_im2/contexts/chat/composer/view.cljs

@@ -99,7 +99,9 @@
         (when chat-screen-loaded?
           [:<>
            [reply/view state]
-           [edit/view state]])
+           [edit/view
+            {:text-value (:text-value state)
+             :input-ref  (:input-ref props)}]])
         [reanimated/touchable-opacity
          {:active-opacity      1
           :on-press            (fn []
@@ -151,7 +153,8 @@
   (let [window-height (:height (rn/get-window))
         theme         (quo.theme/use-theme-value)
         opacity       (reanimated/use-shared-value 0)
-        background-y  (reanimated/use-shared-value (- window-height)) ; Y position of background overlay
+        background-y  (reanimated/use-shared-value (- window-height)) ; Y position of background
+                                                                      ; overlay
         blur-height   (reanimated/use-shared-value (+ constants/composer-default-height
                                                       (:bottom insets)))
         extra-params  {:insets                            insets