Merge pull request #6912 from penpot/andy-highlight-font-selector

✨ Highlight first font in font selector search, apply on Enter/click

CHANGES.md

@@ -25,6 +25,7 @@
 - Hide bounding box while editing visual effects [Taiga #11576](https://tree.taiga.io/project/penpot/issue/11576)
 - Improved text layer resizing: Allow double-click on text bounding box to set auto-width/auto-height [Taiga #11577](https://tree.taiga.io/project/penpot/issue/11577)
 - Improve text layer auto-resize: auto-width switches to auto-height on horizontal resize, and only switches to fixed on vertical resize [Taiga #11578](https://tree.taiga.io/project/penpot/issue/11578)
+- Highlight first font in font selector search. Apply only on Enter or click. [Taiga #11579](https://tree.taiga.io/project/penpot/issue/11579)
 
 ### :bug: Bugs fixed
 

frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs

@@ -112,7 +112,6 @@
         recent-fonts (mf/with-memo [state recent-fonts]
                        (filter-fonts state recent-fonts))
 
-
         full-size?   (boolean (and full-size show-recent))
 
         select-next
@@ -131,6 +130,13 @@
            (dom/prevent-default event)
            (swap! selected get-prev-font fonts)))
 
+        on-select-and-close
+        (mf/use-fn
+         (mf/deps on-select on-close)
+         (fn [font]
+           (on-select font)
+           (on-close)))
+
         on-key-down
         (mf/use-fn
          (mf/deps fonts)
@@ -139,7 +145,7 @@
              (kbd/up-arrow? event)   (select-prev event)
              (kbd/down-arrow? event) (select-next event)
              (kbd/esc? event)        (on-close)
-             (kbd/enter? event)      (on-close)
+             (kbd/enter? event)      (do (on-select-and-close @selected))
              :else                   (dom/focus! (mf/ref-val input)))))
 
         on-filter-change
@@ -163,9 +169,6 @@
         (when-let [index (:index @selected)]
           (.scrollToRow ^js inst index))))
 
-    (mf/with-effect [@selected]
-      (on-select @selected))
-
     (mf/with-effect []
       (st/emit! (dsc/push-shortcuts :typography {}))
       (fn []
@@ -178,6 +181,10 @@
          #(let [offset (.getOffsetForRow ^js inst #js {:alignment "center" :index index})]
             (.scrollToPosition ^js inst offset)))))
 
+    (mf/with-effect [(:term state) fonts]
+      (when (and (seq fonts) (not= (:id @selected) (:id (first fonts))))
+        (reset! selected (first fonts))))
+
     [:div {:class (stl/css :font-selector)}
      [:div {:class (stl/css-case :font-selector-dropdown true :font-selector-dropdown-full-size full-size?)}
       [:div {:class (stl/css :header)}