fix: bottom property edit popup

Author: tiensonqin

src/main/frontend/components/block.cljs

@@ -2616,8 +2616,9 @@
   [^js pill]
   (when-let [trigger (some-> pill
                              (.querySelector ".bottom-property-content .jtrigger"))]
-    (.click trigger)
-    (some-> trigger .focus)
+    (if (some-> pill (.querySelector ".bottom-property-content [data-popup-active]"))
+      (shui/popup-hide!)
+      (.click trigger))
     true))
 
 (defn- current-bottom-pill
@@ -2722,12 +2723,9 @@
        {:type "button"
         :on-click (fn [e]
                     (util/stop e)
-                    (when-let [trigger
-                               (some-> (.-currentTarget e)
-                                       (.closest ".bottom-property-content")
-                                       (.querySelector ".jtrigger"))]
-                      (.click trigger)
-                      (some-> trigger .focus)))}
+                    (some-> (.-currentTarget e)
+                            (.closest ".bottom-property-pill")
+                            trigger-bottom-pill-edit!))}
        (ui/icon "edit" {:size 15})])]]))
 
 (defn- block-below-positioned-properties-cp

src/main/frontend/components/block.css

@@ -1066,7 +1066,7 @@ html.is-mac {
   .bottom-properties-row:focus {
     outline: none;
     box-shadow: inset 0 0 0 1px var(--ls-link-text-color);
-    border-radius: 9999px;
+    border-radius: 6px;
   }
 
   .bottom-property-pill {

src/main/frontend/components/property/value.cljs

@@ -463,6 +463,12 @@
   (property-handler/remove-block-property! (:db/id block)
                                            (:db/ident property)))
 
+(defn- prevent-bottom-property-edit-pointer-dismiss
+  [^js e]
+  (when (some-> (.-target e) (.closest ".bottom-property-edit-icon"))
+    (.preventDefault e)
+    false))
+
 (rum/defc date-picker
   [value {:keys [block property datetime? on-change on-delete del-btn? editing? multiple-values? other-position?
                  suppress-inline-edit-icon? property-position]}]
@@ -481,7 +487,9 @@
                         (editor-handler/save-current-block!)
                         (when-not config/publishing?
                           (shui/popup-show! (.-target e) content-fn
-                                            {:align "start" :auto-focus? true}))))
+                                            {:align "start"
+                                             :auto-focus? true
+                                             :content-props {:onPointerDownOutside prevent-bottom-property-edit-pointer-dismiss}}))))
         repeated-task? (:logseq.property.repeat/repeated? block)]
     (if editing?
       (content-fn {:id :date-picker})

src/test/frontend/components/property/value_test.cljs

@@ -65,3 +65,16 @@
                       :block/uuid #uuid "11111111-1111-1111-1111-111111111111"}]
     (is (= (:logseq.property/default-value property)
            (#'property-value/resolved-property-value-for-render loaded-block property false)))))
+
+(deftest bottom-property-edit-pointer-dismiss-handler-test
+  (let [edit-button (js-obj "closest" (fn [selector]
+                                        (when (= selector ".bottom-property-edit-icon")
+                                          #js {})))
+        other-target (js-obj "closest" (constantly nil))
+        prevent-default-called? (atom false)
+        edit-event (js-obj "target" edit-button
+                           "preventDefault" #(reset! prevent-default-called? true))
+        other-event (js-obj "target" other-target)]
+    (is (false? (#'property-value/prevent-bottom-property-edit-pointer-dismiss edit-event)))
+    (is (true? @prevent-default-called?))
+    (is (nil? (#'property-value/prevent-bottom-property-edit-pointer-dismiss other-event)))))