Use custom input value logic when token is applied

This commit is contained in:
Florian Schroedl 2024-05-21 15:40:34 +02:00
parent 50354ccb71
commit 35f384ce9b

View file

@ -63,6 +63,7 @@
(let [state* (mf/use-state {:id (uuid/next) (let [state* (mf/use-state {:id (uuid/next)
:is-open? false :is-open? false
:current-value value :current-value value
:token-value nil
:current-item nil :current-item nil
:top nil :top nil
:left nil :left nil
@ -98,9 +99,15 @@
options) options)
(into {})) (into {}))
set-token-value!
(fn [value]
(swap! state* assoc :token-value value))
set-value set-value
(fn [value] (fn [value]
(swap! state* assoc :current-value value) (swap! state* assoc
:current-value value
:token-value value)
(when on-change (on-change value))) (when on-change (on-change value)))
select-item select-item
@ -114,6 +121,7 @@
{:keys [value] :as item} (get labels-map label)] {:keys [value] :as item} (get labels-map label)]
(swap! state* assoc (swap! state* assoc
:current-value value :current-value value
:token-value nil
:current-item item) :current-item item)
(when on-change (on-change item)) (when on-change (on-change item))
(when on-blur (on-blur))))) (when on-blur (on-blur)))))
@ -143,9 +151,14 @@
handle-key-down handle-key-down
(mf/use-fn (mf/use-fn
(mf/deps set-value is-open?) (mf/deps set-value is-open? token)
(fn [event] (fn [^js event]
(cond (cond
token (let [backspace? (kbd/backspace? event)
value (-> event dom/get-target dom/get-value)
caret-at-beginning? (= 0 (.. event -target -selectionStart))]
(set-token-value! value)
(js/console.log "backspace?" caret-at-beginning? (.. event -target)))
is-open? (let [up? (kbd/up-arrow? event) is-open? (let [up? (kbd/up-arrow? event)
down? (kbd/down-arrow? event)] down? (kbd/down-arrow? event)]
(dom/prevent-default event) (dom/prevent-default event)
@ -196,7 +209,7 @@
[:div {:class (stl/css :token-pill)} [:div {:class (stl/css :token-pill)}
(:label token)]) (:label token)])
(cond (cond
token [:input {:value "" token [:input {:value (or (:token-value state) "")
:class input-class :class input-class
:on-change handle-change-input :on-change handle-change-input
:on-key-down handle-key-down :on-key-down handle-key-down