github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-05-02 22:58:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix adjust focus in select component (#7024)

Browse Source
This commit is contained in:
Luis de Dios 2025-08-04 10:21:17 +02:00 committed by GitHub
parent 44d626d578
commit 1b30325640
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 7 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/app/main/ui/ds/controls/select.cljs
View File

@ -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}

4
frontend/src/app/main/ui/ds/controls/select.scss
View File

@ -54,10 +54,6 @@
appearance: none;
}
.focused {
--select-outline-color: var(--color-accent-primary);
}
.arrow {
color: var(--select-icon-fg-color);
transform: rotate(90deg);