From beb6048bf9c6338c09f646dde56b424159d698b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Mon, 15 Jun 2020 11:22:28 +0200 Subject: [PATCH] :sparkles: Auto select input when editing layers and pages name --- .../src/uxbox/main/ui/workspace/sidebar/layers.cljs | 10 ++++++++++ .../src/uxbox/main/ui/workspace/sidebar/sitemap.cljs | 9 +++++++++ 2 files changed, 19 insertions(+) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs index 6b010a179..5275fa489 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs @@ -51,6 +51,7 @@ (mf/defc layer-name [{:keys [shape] :as props}] (let [local (mf/use-state {}) + edit-input-ref (mf/use-ref) on-blur (fn [event] (let [target (dom/event->target event) parent (.-parentNode target) @@ -68,9 +69,18 @@ parent (.-parentNode parent)] (set! (.-draggable parent) false)) (swap! local assoc :edition true))] + + (mf/use-effect + (mf/deps (:edition @local)) + #(when (:edition @local) + (let [edit-input (mf/ref-val edit-input-ref)] + (dom/select-text! edit-input)) + nil)) + (if (:edition @local) [:input.element-name {:type "text" + :ref edit-input-ref :on-blur on-blur :on-key-down on-key-down :auto-focus true diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs index d2bdaa40f..03eae976b 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs @@ -28,6 +28,7 @@ (mf/defc page-item [{:keys [page index deletable? selected?] :as props}] (let [local (mf/use-state {}) + edit-input-ref (mf/use-ref) on-double-click (fn [event] @@ -70,6 +71,13 @@ :index index :name (:name page)})] + (mf/use-effect + (mf/deps (:edition @local)) + #(when (:edition @local) + (let [edit-input (mf/ref-val edit-input-ref)] + (dom/select-text! edit-input)) + nil)) + [:li {:class (dom/classnames :selected selected? :dnd-over-top (= (:over dprops) :top) @@ -83,6 +91,7 @@ (if (:edition @local) [:* [:input.element-name {:type "text" + :ref edit-input-ref :on-blur on-blur :on-key-down on-key-down :auto-focus true