From dab4d953ecc0f4e44bc89f3fe012aea9a50ab477 Mon Sep 17 00:00:00 2001
From: Icaro Motta <icaro.ldm@gmail.com>
Date: Wed, 13 Sep 2023 13:22:53 -0300
Subject: [PATCH] Fix incorrect usage of functional component (#17281)

Every keypress on an input field of the preview descriptor re-rendered the whole
functional component and the input focus was lost.

As we know from past issues, we should never use this pattern:

    (defn component
      []
      [:f>
       (fn []
         ...)])
---
 .../contexts/quo_preview/preview.cljs         | 75 ++++++++++---------
 1 file changed, 38 insertions(+), 37 deletions(-)

diff --git a/src/status_im2/contexts/quo_preview/preview.cljs b/src/status_im2/contexts/quo_preview/preview.cljs
index 96751331df..f44e651eb8 100644
--- a/src/status_im2/contexts/quo_preview/preview.cljs
+++ b/src/status_im2/contexts/quo_preview/preview.cljs
@@ -229,45 +229,46 @@
                          style)}]
          children)])
 
-
-(defn preview-container
+(defn- f-preview-container
   [{:keys [state descriptor blur? blur-dark-only?
            component-container-style
            blur-container-style blur-view-props blur-height show-blur-background?]
     :or   {blur-height 200}}
    & children]
-  [:f>
-   (fn []
-     (rn/use-effect (fn []
-                      (when blur-dark-only?
-                        (if blur?
-                          (quo.theme/set-theme :dark)
-                          (quo.theme/set-theme :light))))
-                    [blur? blur-dark-only?])
-     [rn/view
-      {:style {:top  (safe-area/get-top)
-               :flex 1}}
-      [common/navigation-bar]
-      [rn/scroll-view
-       {:style                           (style/panel-basic)
-        :shows-vertical-scroll-indicator false}
-       [rn/pressable {:on-press rn/dismiss-keyboard!}
-        (when descriptor
-          [rn/view {:style style/customizer-container}
-           [customizer state descriptor]])
-        (if blur?
-          [rn/view {:style (merge style/component-container component-container-style)}
-           (into [blur-view
-                  {:show-blur-background? show-blur-background?
-                   :height                blur-height
-                   :style                 (merge {:width     "100%"
-                                                  :flex-grow 1}
-                                                 (when-not show-blur-background?
-                                                   {:padding-horizontal 0
-                                                    :top                0})
-                                                 blur-container-style)
-                   :blur-view-props       (merge {:blur-type (quo.theme/get-theme)}
-                                                 blur-view-props)}]
-                 children)]
-          (into [rn/view {:style (merge style/component-container component-container-style)}]
-                children))]]])])
+  (rn/use-effect (fn []
+                   (when blur-dark-only?
+                     (if blur?
+                       (quo.theme/set-theme :dark)
+                       (quo.theme/set-theme :light))))
+                 [blur? blur-dark-only?])
+  [rn/view
+   {:style {:top  (safe-area/get-top)
+            :flex 1}}
+   [common/navigation-bar]
+   [rn/scroll-view
+    {:style                           (style/panel-basic)
+     :shows-vertical-scroll-indicator false}
+    [rn/pressable {:on-press rn/dismiss-keyboard!}
+     (when descriptor
+       [rn/view {:style style/customizer-container}
+        [customizer state descriptor]])
+     (if blur?
+       [rn/view {:style (merge style/component-container component-container-style)}
+        (into [blur-view
+               {:show-blur-background? show-blur-background?
+                :height                blur-height
+                :style                 (merge {:width     "100%"
+                                               :flex-grow 1}
+                                              (when-not show-blur-background?
+                                                {:padding-horizontal 0
+                                                 :top                0})
+                                              blur-container-style)
+                :blur-view-props       (merge {:blur-type (quo.theme/get-theme)}
+                                              blur-view-props)}]
+              children)]
+       (into [rn/view {:style (merge style/component-container component-container-style)}]
+             children))]]])
+
+(defn preview-container
+  [& args]
+  (into [:f> f-preview-container] args))