🐛 Intro doesn't trigger dropdown

frontend/playwright/ui/specs/tokens/crud.spec.js

@@ -37,7 +37,7 @@ test.describe("Tokens - creation", () => {
     const missingReferenceError = "Missing token references";
 
     const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
-      await setupEmptyTokensFile(page , {
+      await setupEmptyTokensFileRender(page , {
         flags: ["enable-token-combobox", "enable-feature-token-input"],
       });
 

frontend/playwright/ui/specs/tokens/remapping.spec.js

@@ -45,7 +45,7 @@ const createToken = async (page, type, name, textFieldName, value) => {
 const createTokenCombobox = async (page, type, name, textFieldName, value) => {
   const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
 
-  const { tokensUpdateCreateModal } = await setupTokensFile(page, {
+  const { tokensUpdateCreateModal } = await setupTokensFileRender(page, {
     flags: ["enable-token-shadow"],
   });
 

frontend/src/app/main/ui/ds/buttons/icon_button.cljs

@@ -17,6 +17,7 @@
   [:map
    [:class {:optional true} :string]
    [:tooltip-class {:optional true} [:maybe :string]]
+   [:type {:optional true} [:maybe [:enum "button" "submit" "reset"]]]
    [:icon-class {:optional true} :string]
    [:icon
     [:and :string [:fn #(contains? icon-list %)]]]
@@ -29,7 +30,7 @@
 (mf/defc icon-button*
   {::mf/schema schema:icon-button
    ::mf/memo true}
-  [{:keys [class icon icon-class variant aria-label children tooltip-placement tooltip-class] :rest props}]
+  [{:keys [class icon icon-class variant aria-label children tooltip-placement tooltip-class type] :rest props}]
   (let [variant
         (d/nilv variant "primary")
 
@@ -47,6 +48,7 @@
         props
         (mf/spread-props props
                          {:class [class button-class]
+                          :type (d/nilv type "button")
                           :aria-labelledby tooltip-id})]
 
     [:> tooltip* {:content aria-label

frontend/src/app/main/ui/workspace/tokens/management/forms/controls/combobox_navigation.cljs

@@ -84,9 +84,9 @@
 
                enter?
                (do
-                 (dom/prevent-default event)
                  (when (and is-open focused-id)
                    (let [focusables (focusable-options options)]
+                     (dom/prevent-default event)
                      (when (some #(= (:id %) focused-id) focusables)
                        (on-enter focused-id)))))
                esc?
@@ -98,10 +98,12 @@
     ;; Initial focus on first option
     (mf/with-effect [is-open options]
       (when is-open
-        (let [options (if (delay? options) @options options)
-              focusables (focusable-options options)
-              first-id (some :id focusables)]
-          (reset! focused-id* first-id))))
+        (let [opts (if (delay? options) @options options)
+              focusables (focusable-options opts)
+              ids (set (map :id focusables))]
+          (when (and (seq focusables)
+                     (not (contains? ids focused-id)))
+            (reset! focused-id* (:id (first focusables)))))))
 
     ;; auto scroll when key down
     (mf/with-effect [focused-id nodes-ref]
@@ -113,12 +115,5 @@
              node {:block "nearest"
                    :inline "nearest"})))))
 
-    (mf/with-effect [is-open options]
-      (when is-open
-        (let [opts (if (delay? options) @options options)
-              focusables (focusable-options opts)
-              first-id (some :id focusables)]
-          (reset! focused-id* first-id))))
-
     {:focused-id focused-id
      :on-key-down on-key-down}))

frontend/src/app/main/ui/workspace/tokens/management/forms/generic_form.cljs

@@ -250,15 +250,15 @@
                             :trim true
                             :auto-focus true}]]
 
-      [:div {:class (stl/css :input-row)}
-       (case value-type
-         :indexed
-         [:> input-component
-          {:token          token
-           :tokens         tokens
-           :tab            active-tab
-           :value-subfield value-subfield
-           :handle-toggle  on-toggle-tab}]
+       [:div {:class (stl/css :input-row)}
+        (case value-type
+          :indexed
+          [:> input-component
+           {:token          token
+            :tokens         tokens
+            :tab            active-tab
+            :value-subfield value-subfield
+            :handle-toggle  on-toggle-tab}]
 
           :composite
           [:> input-component