From b125c2cabb80530991c7df66fc36bd189795475d Mon Sep 17 00:00:00 2001 From: Luis de Dios Date: Wed, 13 May 2026 15:51:24 +0200 Subject: [PATCH] :bug: Fix remove resize cursor CSS for inputs (#9590) * :bug: Remove cursor CSS for all inputs - Restore the default cursor for the dashboard inputs. - Make the numeric-input component from DS to work as expected. * :bug: Fix remove drag-to-change behaviour from old numeric-input --- frontend/resources/styles/common/base.scss | 8 -- .../styles/common/refactor/basic-rules.scss | 8 -- .../app/main/ui/components/numeric_input.cljs | 94 ++----------------- .../main/ui/ds/controls/numeric_input.cljs | 3 - .../sidebar/options/rows/color_row.scss | 10 -- 5 files changed, 10 insertions(+), 113 deletions(-) diff --git a/frontend/resources/styles/common/base.scss b/frontend/resources/styles/common/base.scss index 37df67b3e8..e8761a123f 100644 --- a/frontend/resources/styles/common/base.scss +++ b/frontend/resources/styles/common/base.scss @@ -27,14 +27,6 @@ body { width: 100vw; height: 100vh; overflow: hidden; - - &.cursor-drag-scrub { - cursor: ew-resize !important; - - * { - cursor: ew-resize !important; - } - } } #app { diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss index efac327f36..2c9da12a90 100644 --- a/frontend/resources/styles/common/refactor/basic-rules.scss +++ b/frontend/resources/styles/common/refactor/basic-rules.scss @@ -378,14 +378,6 @@ border: $s-1 solid var(--input-border-color); color: var(--input-foreground-color); - &:not(:focus-within) { - cursor: ew-resize; - - input { - cursor: ew-resize; - } - } - span, label { @extend %input-label; diff --git a/frontend/src/app/main/ui/components/numeric_input.cljs b/frontend/src/app/main/ui/components/numeric_input.cljs index bec4efd044..3ad3f108ae 100644 --- a/frontend/src/app/main/ui/components/numeric_input.cljs +++ b/frontend/src/app/main/ui/components/numeric_input.cljs @@ -63,11 +63,6 @@ ;; Last value input by the user we need to store to save on unmount last-value* (mf/use-var value) - ;; Drag scrubbing state - drag-state* (mf/use-ref :idle) - drag-start-x* (mf/use-ref 0) - drag-start-val* (mf/use-ref 0) - parse-value (mf/use-fn (mf/deps min-value max-value value nillable? default integer?) @@ -222,80 +217,15 @@ (mf/use-callback (mf/deps on-focus select-on-focus?) (fn [event] - (when-not (= :dragging (mf/ref-val drag-state*)) - (reset! last-value* (parse-value)) - (let [target (dom/get-target event)] - (when on-focus - (mf/set-ref-val! dirty-ref true) - (on-focus event)) - - (when select-on-focus? - (dom/select-text! target) - ;; In webkit browsers the mouseup event will be called after the on-focus causing and unselect - (.addEventListener target "mouseup" dom/prevent-default #js {:once true})))))) - - on-scrub-pointer-down - (mf/use-fn - (mf/deps value value-str min-value max-value default) - (fn [event] - (let [disabled? (unchecked-get props "disabled") - node (mf/ref-val ref) - is-focused (and (some? node) (dom/active? node))] - (when-not (or disabled? is-focused (= :multiple value-str)) - (let [client-x (.-clientX event) - start-val (or value default 0)] - (mf/set-ref-val! drag-state* :maybe-dragging) - (mf/set-ref-val! drag-start-x* client-x) - (mf/set-ref-val! drag-start-val* start-val) - (dom/capture-pointer event)))))) - - on-scrub-pointer-move - (mf/use-fn - (mf/deps apply-value update-input step-value min-value max-value) - (fn [event] - (let [state (mf/ref-val drag-state*)] - (when (or (= state :maybe-dragging) (= state :dragging)) - (let [client-x (.-clientX event) - start-x (mf/ref-val drag-start-x*) - delta-x (- client-x start-x)] - (when (and (= state :maybe-dragging) - (>= (js/Math.abs delta-x) 3)) - (mf/set-ref-val! drag-state* :dragging) - (dom/add-class! (dom/get-body) "cursor-drag-scrub")) - (when (= (mf/ref-val drag-state*) :dragging) - (let [effective-step (cond - (.-shiftKey event) (* step-value 10) - (.-ctrlKey event) (* step-value 0.1) - :else step-value) - steps (js/Math.round (/ delta-x 1)) - new-val (+ (mf/ref-val drag-start-val*) - (* steps effective-step)) - new-val (cond-> new-val - (d/num? min-value) (mth/max min-value) - (d/num? max-value) (mth/min max-value))] - (update-input new-val) - (apply-value event new-val)))))))) - - on-scrub-pointer-up - (mf/use-fn - (mf/deps ref) - (fn [event] - (let [state (mf/ref-val drag-state*)] - (when (= state :maybe-dragging) - (mf/set-ref-val! drag-state* :idle) - (dom/release-pointer event) - (when-let [node (mf/ref-val ref)] - (dom/focus! node))) - (when (= state :dragging) - (mf/set-ref-val! drag-state* :idle) - (dom/remove-class! (dom/get-body) "cursor-drag-scrub") - (dom/release-pointer event))))) - - on-scrub-lost-pointer-capture - (mf/use-fn - (fn [_event] - (mf/set-ref-val! drag-state* :idle) - (dom/remove-class! (dom/get-body) "cursor-drag-scrub"))) + (reset! last-value* (parse-value)) + (let [target (dom/get-target event)] + (when on-focus + (mf/set-ref-val! dirty-ref true) + (on-focus event)) + (when select-on-focus? + (dom/select-text! target) + ;; In webkit browsers the mouseup event will be called after the on-focus causing and unselect + (.addEventListener target "mouseup" dom/prevent-default #js {:once true}))))) props (-> (obj/clone props) (obj/unset! "selectOnFocus") @@ -310,11 +240,7 @@ (obj/set! "title" title) (obj/set! "onKeyDown" handle-key-down) (obj/set! "onBlur" handle-blur) - (obj/set! "onFocus" handle-focus) - (obj/set! "onPointerDown" on-scrub-pointer-down) - (obj/set! "onPointerMove" on-scrub-pointer-move) - (obj/set! "onPointerUp" on-scrub-pointer-up) - (obj/set! "onLostPointerCapture" on-scrub-lost-pointer-capture))] + (obj/set! "onFocus" handle-focus))] (mf/with-effect [value] (when-let [input-node (mf/ref-val ref)] diff --git a/frontend/src/app/main/ui/ds/controls/numeric_input.cljs b/frontend/src/app/main/ui/ds/controls/numeric_input.cljs index d25773c9a7..4b7caf8622 100644 --- a/frontend/src/app/main/ui/ds/controls/numeric_input.cljs +++ b/frontend/src/app/main/ui/ds/controls/numeric_input.cljs @@ -531,7 +531,6 @@ (when (and (= state :maybe-dragging) (>= (js/Math.abs delta-x) 3)) (mf/set-ref-val! drag-state* :dragging) - (dom/add-class! (dom/get-body) "cursor-drag-scrub") (when (fn? on-change-start) (on-change-start))) (when (= (mf/ref-val drag-state*) :dragging) @@ -559,7 +558,6 @@ (dom/focus! node))) (when (= state :dragging) (mf/set-ref-val! drag-state* :idle) - (dom/remove-class! (dom/get-body) "cursor-drag-scrub") (dom/release-pointer event) (when (fn? on-change-end) (on-change-end))))))) @@ -571,7 +569,6 @@ (when-not is-token-applied? (let [was-dragging (= :dragging (mf/ref-val drag-state*))] (mf/set-ref-val! drag-state* :idle) - (dom/remove-class! (dom/get-body) "cursor-drag-scrub") (when (and was-dragging (fn? on-change-end)) (on-change-end)))))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss index c2d6485284..931a7431ca 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss @@ -196,11 +196,6 @@ display: flex; align-items: center; - - &:not(:focus-within) { - cursor: ew-resize; - } - block-size: $sz-32; inline-size: px2rem(60); padding-inline-start: var(--sp-xs); @@ -260,11 +255,6 @@ margin: var(--sp-xxs) 0; padding: 0 0 0 px2rem(6); color: var(--color-foreground-primary); - cursor: ew-resize; - - &:focus { - cursor: text; - } &[disabled] { opacity: 0.5;