From 1aaa9acc80ccdff14a79759bfe3f1ed615bb05ac Mon Sep 17 00:00:00 2001
From: Ibrahem Khalil <33176106+ibrkhalil@users.noreply.github.com>
Date: Thu, 20 Oct 2022 14:04:13 +0200
Subject: [PATCH] Fix tab not selecting and Error: No protocol method
 IDeref.-deref defined for type string:  (#14194)

* Fix laziness and let defined in render
---
 src/quo2/components/tabs/tabs.cljs | 29 +++++++++++++++--------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/quo2/components/tabs/tabs.cljs b/src/quo2/components/tabs/tabs.cljs
index eb5a8d7bdf..f1960a51e3 100644
--- a/src/quo2/components/tabs/tabs.cljs
+++ b/src/quo2/components/tabs/tabs.cljs
@@ -10,21 +10,22 @@
 (def default-tab-size 32)
 
 (defn tabs [{:keys [default-active on-change style]}]
-  (fn [{:keys [data size] :or {size default-tab-size}}]
-    (let [active-id @default-active]
+  (let [active-tab-id (reagent/atom default-active)]
+    (fn [{:keys [data size] :or {size default-tab-size}}]
       [rn/view (merge {:flex-direction :row} style)
-       (for [{:keys [label id]} data]
-         ^{:key id}
-         [rn/view {:style {:margin-right (if (= size default-tab-size) 12 8)}}
-          [tab/tab
-           {:id       id
-            :size     size
-            :active   (= id active-id)
-            :on-press (fn [^js press-event id]
-                        (reset! default-active id)
-                        (when on-change
-                          (on-change press-event id)))}
-           label]])])))
+       (doall
+        (for [{:keys [label id]} data]
+          ^{:key id}
+          [rn/view {:style {:margin-right (if (= size default-tab-size) 12 8)}}
+           [tab/tab
+            {:id       id
+             :size     size
+             :active   (= id @active-tab-id)
+             :on-press (fn []
+                         (reset! active-tab-id id)
+                         (when on-change
+                           (on-change id)))}
+            label]]))])))
 
 (defn- calculate-fade-end-percentage
   [{:keys [offset-x content-width layout-width max-fade-percentage]}]