Recently, I've been using the new syntax such as [ui/on-key-focused {:keymap keymap} [ui/with-cursor {:cursor :pointing-hand} [ui/text-input (merge opts {:*state *state}) ]]] from humbleui and have been learning and experimenting with the related views.clj code from https://github.com/dundalek/humble-outliner. I noticed that the cursor tends to jump around, and I'm not sure if this is related to signal issues or text input key press events,and some key events doesn't work .Don't know why. Thanks @kloud @tonsky
what do you mean by jumping around? I think text input sets cursor to i-beam, so wrapping it in pointing hand is prob not a good idea. Is it what you want?
When I pressed the Enter key, I noticed multiple cursors blinking across several lines, which made the data appear chaotic during input. It turns out that the old syntax works fine with humble deps.
how do you get several lines? text field is single-line
(ui/defcomp outline-tree [*demo items] [ui/row [ui/gap {:width 24 :height 0}] [ui/column (for [{:keys [id children]} items] [ui/column [outline-item *demo id] (when (seq children) [ui/row [indentline] [outline-tree *demo children]])])]]) kind of tree input
Can you share full repo?
I'll send the code here later
https://github.com/zhoumin79/humble-outliner @tonsky thanks.
One thing it needs is [ui/focus-controller that wraps everything, on top level of app. I’ll add it by default eventually
That still leaves some issues with input, not sure why
Haven’t look deeply into it
tried ui/focus-controller but doesn't work.
what doesn’t work?
enter and tab ... key stop working?
Oh right. Maybe move key handler above focus-controller?
I use Apple MAC .
when doing this, multiple cursors shows and input doesn't work
try using key-listener and :on-key-down
instead of on-key-focused
on-key-focused is intended for capturing events when it’s wrapped in a focusable element. It’s not what you need here
(defn text-field [{:keys [id focused *demo *state]}] (let [opts {:focused focused :on-focus (fn [] ; no parameters for on-focus (dispatch! *demo (events/item-input-focused id))) :on-change (fn [text] (dispatch! *demo (events/item-input-changed id text)))} ;; keymap {:enter #(dispatch! *demo (events/item-enter-pressed id (:from @*state))) ;; :up #(dispatch! *demo (events/focus-before id)) ;; :down #(dispatch! *demo (events/focus-after id))} ] [ui/with-context {:hui.text-field/cursor-blink-interval 500 :hui.text-field/cursor-width 1 :hui.text-field/padding-top (float 8) :hui.text-field/padding-bottom (float 8) :hui.text-field/padding-left (float 0) :hui.text-field/padding-right (float 0)} [ui/focusable opts [ui/event-listener {:capture? true :event :key :on-event (fn [e ctx] (when (and (:hui/focused? ctx) (:pressed? e)) (cond (and (= :backspace (:key e)) (zero? (:from @*state)) (zero? (:to @*state))) (dispatch! *demo (events/item-beginning-backspace-pressed id)) (= :enter (:key e)) #(dispatch! *demo (events/item-enter-pressed id (:from @*state))) (and (= :tab (:key e)) (:shift (:modifiers e))) (dispatch! *demo (events/item-outdented id)) (= :tab (:key e)) (dispatch! *demo (events/item-indented id)) (and (= :up (:key e)) (= #{:shift :alt} (:modifiers e))) (dispatch! *demo (events/item-move-up id)) (and (= :down (:key e)) (= #{:shift :alt} (:modifiers e))) (dispatch! *demo (events/item-move-down id)))))} [ui/key-listener {:on-key-up #(dispatch! *demo (events/focus-before id)) :on-key-down #(dispatch! *demo (events/focus-after id))} [ui/focus-controller [ui/with-cursor {:cursor :pointing-hand} [ui/text-input (merge opts {:*state *state}) ]]]]] ] ]))
tried but enter key doesn't work.
I guess KeyListener needs a capture mode, same as clickable
(this is not implemented, feel free to look into it a provide a patch)
Also, don’t put focus-controller around each text-field. There only needs to be 1 instance
per app
or per window
thanks. now not sure to do it. will try to dive deeper into the source code