fix: scroll if only invisible

pull/10493/head
Tienson Qin 2023-11-06 11:19:04 +08:00
parent 0039a1955f
commit 49db9d645b
1 changed files with 17 additions and 4 deletions

View File

@ -363,6 +363,20 @@
(when-let [action (state->action state)] (when-let [action (state->action state)]
(handle-action action state event))) (handle-action action state event)))
(defn- scroll-into-view-when-invisible
[state target]
(let [*container-ref (::scroll-container-ref state)
container-rect (.getBoundingClientRect @*container-ref)
t1 (.-top container-rect)
b1 (.-bottom container-rect)
target-rect (.getBoundingClientRect target)
t2 (.-top target-rect)
b2 (.-bottom target-rect)]
(when-not (<= t1 t2 b2 b1) ; not visible
(.scrollIntoView target
#js {:inline "nearest"
:behavior "smooth"}))))
(rum/defc result-group < rum/reactive (rum/defc result-group < rum/reactive
[state title group visible-items first-item] [state title group visible-items first-item]
(let [{:keys [show items]} (some-> state ::results deref group) (let [{:keys [show items]} (some-> state ::results deref group)
@ -419,9 +433,7 @@
(reset! (::highlighted-group state) group) (reset! (::highlighted-group state) group)
(when (and ref (.-current ref) (when (and ref (.-current ref)
(not (:mouse-enter-triggered-highlight @(::highlighted-item state)))) (not (:mouse-enter-triggered-highlight @(::highlighted-item state))))
(.. ref -current (scrollIntoView #js {:block "center" (scroll-into-view-when-invisible state (.-current ref)))))
:inline "nearest"
:behavior "smooth"})))))
context))]])) context))]]))
(defn move-highlight [state n] (defn move-highlight [state n]
@ -669,7 +681,8 @@
(input-row state all-items)) (input-row state all-items))
[:div {:class (cond-> "w-full flex-1 overflow-y-auto max-h-[65dvh]" [:div {:class (cond-> "w-full flex-1 overflow-y-auto max-h-[65dvh]"
(not sidebar?) (str " pb-14")) (not sidebar?) (str " pb-14"))
:ref #(when % (some-> state ::scroll-container-ref (reset! %))) :ref #(let [*ref (::scroll-container-ref state)]
(when-not @*ref (reset! *ref %)))
:style {:background "var(--lx-gray-02)"}} :style {:background "var(--lx-gray-02)"}}
(let [items (filter (let [items (filter
(fn [[_group-name group-key group-count _group-items]] (fn [[_group-name group-key group-count _group-items]]