From 1b30325640058f5ae35b3636d3bbf7c28b30854f Mon Sep 17 00:00:00 2001
From: Luis de Dios <luis.dedios@kaleidos.net>
Date: Mon, 4 Aug 2025 10:21:17 +0200
Subject: [PATCH] :bug: Fix adjust focus in select component (#7024)

---
 .../src/app/main/ui/ds/controls/select.cljs   | 25 ++++++-------------
 .../src/app/main/ui/ds/controls/select.scss   |  4 ---
 2 files changed, 7 insertions(+), 22 deletions(-)

diff --git a/frontend/src/app/main/ui/ds/controls/select.cljs b/frontend/src/app/main/ui/ds/controls/select.cljs
index d64d807bc2..f271789fae 100644
--- a/frontend/src/app/main/ui/ds/controls/select.cljs
+++ b/frontend/src/app/main/ui/ds/controls/select.cljs
@@ -71,12 +71,9 @@
         selected-id* (mf/use-state  #(get-selected-option-id options default-selected))
         selected-id  (deref selected-id*)
 
-        focused-id*  (mf/use-state selected-id)
+        focused-id*  (mf/use-state nil)
         focused-id   (deref focused-id*)
 
-        has-focus*   (mf/use-state false)
-        has-focus    (deref has-focus*)
-
         listbox-id   (mf/use-id)
 
         nodes-ref    (mf/use-ref nil)
@@ -118,7 +115,6 @@
          (mf/deps disabled)
          (fn [event]
            (dom/stop-propagation event)
-           (reset! has-focus* true)
            (when-not disabled
              (swap! is-open* not))))
 
@@ -129,12 +125,7 @@
                  select-node (mf/ref-val select-ref)]
              (when-not (dom/is-child? select-node target)
                (reset! focused-id* nil)
-               (reset! is-open* false)
-               (reset! has-focus* false)))))
-
-        on-focus
-        (mf/use-fn
-         #(reset! has-focus* true))
+               (reset! is-open* false)))))
 
         on-button-key-down
         (mf/use-fn
@@ -160,18 +151,17 @@
                      (kbd/enter? event))
                  (when (deref is-open*)
                    (dom/prevent-default event)
-                   (handle-selection focused-id* selected-id* is-open*))
+                   (handle-selection focused-id* selected-id* is-open*)
+                   (when (and (fn? on-change)
+                              (some? focused-id))
+                     (on-change focused-id)))
 
                  (kbd/esc? event)
                  (do (reset! is-open* false)
                      (reset! focused-id* nil)))))))
 
-        select-class
-        (stl/css-case :select true
-                      :focused has-focus)
-
         props
-        (mf/spread-props props {:class [class select-class]
+        (mf/spread-props props {:class [class (stl/css :select)]
                                 :role "combobox"
                                 :aria-controls listbox-id
                                 :aria-haspopup "listbox"
@@ -199,7 +189,6 @@
 
     [:div {:class (stl/css :select-wrapper)
            :on-click on-click
-           :on-focus on-focus
            :ref select-ref
            :on-blur on-blur}
 
diff --git a/frontend/src/app/main/ui/ds/controls/select.scss b/frontend/src/app/main/ui/ds/controls/select.scss
index 769a5fc3e1..c5435ddb0f 100644
--- a/frontend/src/app/main/ui/ds/controls/select.scss
+++ b/frontend/src/app/main/ui/ds/controls/select.scss
@@ -54,10 +54,6 @@
   appearance: none;
 }
 
-.focused {
-  --select-outline-color: var(--color-accent-primary);
-}
-
 .arrow {
   color: var(--select-icon-fg-color);
   transform: rotate(90deg);