[#5451] [desktop] fix flickering topic input

src/status_im/ui/screens/desktop/main/add_new/styles.cljs

@@ -37,6 +37,9 @@
    :margin-right     12
    :border-radius    8})
 
+(def add-pub-chat-input
+  (assoc add-contact-input :padding-left 10))
+
 (defn add-contact-button [error?]
   {:width            140
    :height           45
@@ -72,3 +75,12 @@
 (def suggested-topic-text
   {:font-size 25.6
    :color     colors/white})
+
+(def topic-placeholder
+  {:flex          0
+   :top           -63
+   :left          5
+   :font-size     14
+   :width         5
+   :height        16
+   :margin-bottom -16})

src/status_im/ui/screens/desktop/main/add_new/views.cljs

@@ -27,14 +27,19 @@
       {:style (styles/add-contact-button-text nil)}
       (i18n/label :start-chat)]]]])
 
+(defn topic-input-placeholder []
+  [react/text {:style styles/topic-placeholder} "#"])
+
+(defn on-topic-change [e]
+  (let [text (.. e -nativeEvent -text)]
+    (re-frame/dispatch [:set :public-group-topic text])))
+
 (views/defview new-contact []
   (views/letsubs [new-contact-identity [:get :contacts/new-identity]
                   contacts             [:all-added-people-contacts]
                   chat-error           [:new-identity-error]
                   topic                [:get :public-group-topic]
-                  topic-error          [:new-topic-error-message]
+                  topic-error          [:new-topic-error-message]]
-                  account              [:get-current-account]
-                  topic-input-ref      (atom nil)]
     [react/scroll-view
      [react/view {:style styles/new-contact-view}
       ^{:key "newcontact"}
@@ -83,20 +88,13 @@
       [react/text {:style styles/new-contact-subtitle} (i18n/label :public-group-topic)]
       [react/view {:style styles/new-contact-separator}]
       [react/view {:style styles/add-contact-edit-view}
-       [react/view {:style {:flex 1}}
+       [react/view {:flex  1
-        [react/text-input {:flex             1
+                    :style styles/add-pub-chat-input}
-                           :ref              #(when (and (nil? @topic-input-ref) %)
+        [react/text-input {:flex            1
-                                                (.setNativeProps % (js-obj "text" "#"))
+                           :font            :default
-                                                (reset! topic-input-ref %))
+                           :selection-color colors/hawkes-blue
-                           :style            styles/add-contact-input
+                           :placeholder     ""
-                           :font             :default
+                           :on-change       on-topic-change}]]
-                           :selection-color  colors/hawkes-blue
-                           :on-change        (fn [e]
-                                               (let [native-event (.-nativeEvent e)
-                                                     text (.-text native-event)
-                                                     [_ before after] (first (re-seq #"(.*)\#(.*)" text))]
-                                                 (.setNativeProps @topic-input-ref (js-obj "text" (str "#" before after)))
-                                                 (re-frame/dispatch [:set :public-group-topic (subs text 1)])))}]]
        [react/touchable-highlight {:disabled topic-error
                                    :on-press #(when-not topic-error
                                                 (do
@@ -105,6 +103,7 @@
         [react/view {:style (styles/add-contact-button topic-error)}
          [react/text {:style (styles/add-contact-button-text topic-error)}
           (i18n/label :new-public-group-chat)]]]]
+      [topic-input-placeholder]
       [react/text {:style styles/new-contact-subtitle} (i18n/label :selected-for-you)]
       [react/view {:style styles/suggested-contacts}
        (doall