fix: Datepicker behaves oddly if there are 2 datepickers visible at the same time (#7498)

fixes #7341

Co-authored-by: Gabriel Horner <[email protected]>

e2e-tests/basic.spec.ts

@@ -247,3 +247,30 @@ test('Scheduled date picker should point to the already specified Date #6985', a
   await page.click('a.opacity-80')
   await page.waitForTimeout(500)
 })
+
+test('Opening a second datepicker should close the first one #7341', async({page,block})=>{
+  await createRandomPage(page)
+
+  await block.mustFill('testTask \n SCHEDULED: <2000-05-06 Sat>')
+
+  await block.enterNext();
+
+  await block.mustFill('testTask \n SCHEDULED: <2000-06-07 Wed>')
+  await block.enterNext();
+  await page.click('#main-content-container')
+  // Open date picker
+  await page.waitForTimeout(500)
+  await page.click('#main-content-container')
+  await page.waitForTimeout(500)
+  await page.click('a:has-text("2000-06-07 Wed").opacity-80')
+  await page.waitForTimeout(50)
+  await page.click('a:has-text("2000-05-06 Sat").opacity-80')
+  await page.waitForTimeout(50)
+  expect(page.locator('text=May 2000')).toBeVisible()
+  expect(page.locator('td:has-text("6").active')).toBeVisible()
+  expect(page.locator('text=June 2000')).not.toBeVisible()
+  expect(page.locator('td:has-text("7").active')).not.toBeVisible()
+
+  // Close date picker
+  await page.click('a:has-text("2000-05-06 Sat").opacity-80')
+})

src/main/frontend/components/block.cljs

@@ -2082,39 +2082,29 @@
      [:code "Property name begins with a non-numeric character and can contain alphanumeric characters and . * + ! - _ ? $ % & = < >. If -, + or . are the first character, the second character (if any) must be non-numeric."]]))
 
 (rum/defcs timestamp-cp < rum/reactive
-  (rum/local false ::show?)
-  (rum/local {} ::pos)
-  {:will-unmount (fn [state]
-                   (when-let [show? (::show? state)]
-                     (reset! show? false))
-                   state)}
   [state block typ ast]
-  (let [show? (get state ::show?)]
-    [:div.flex.flex-col.timestamp
+  (let [ts-block (state/sub :editor/set-timestamp-block)
+        active? #(= (get block :block/uuid) (get-in ts-block [:block :block/uuid]))]
+    [:div.flex.flex-col.gap-4.timestamp
      [:div.text-sm.flex.flex-row
       [:div.opacity-50.font-medium.timestamp-label
        (str typ ": ")]
       [:a.opacity-80.hover:opacity-100
        {:on-mouse-down (fn [e]
                          (util/stop e)
-                         (if @show?
-                           (do
-                             (reset! show? false)
-                             (reset! commands/*current-command nil)
-                             (state/clear-editor-action!)
-                             (state/set-timestamp-block! nil))
+                         (if (active?)
+                          (do
+                            (reset! commands/*current-command nil)
+                            (state/clear-editor-action!)
+                            (state/set-timestamp-block! nil))
                            (do
-                             (reset! show? true)
                              (reset! commands/*current-command typ)
                              (state/set-editor-action! :datepicker)
                              (state/set-timestamp-block! {:block block
-                                                          :typ typ
-                                                          :show? show?}))))}
+                                                          :typ typ}))))}
        [:span.time-start "<"] [:time (repeated/timestamp->text ast)] [:span.time-stop ">"]]]
-     (when (true? @show?)
-       (let [ts (repeated/timestamp->map ast)]
-         [:div.my-4
-          (datetime-comp/date-picker nil nil ts)]))]))
+     (when (active?)
+          (datetime-comp/date-picker nil nil (repeated/timestamp->map ast)))]))
 
 (defn- target-forbidden-edit?
   [target]

src/main/frontend/components/datetime.cljs

@@ -83,7 +83,6 @@
   (reset! *timestamp default-timestamp-value)
   (reset! *show-time? false)
   (reset! *show-repeater? false)
-  (state/set-timestamp-block! nil)
   (state/set-state! :date-picker/date nil))
 
 (defn- on-submit
@@ -131,16 +130,14 @@
 (rum/defc date-picker < rum/reactive
   {:init (fn [state]
            (let [ts (last (:rum/args state))]
+             (clear-timestamp!)
              (if ts
                (reset! *timestamp ts)
                (reset! *timestamp {:time ""
                                    :repeater {}}))
              (when-not (:date-picker/date @state/state)
                (state/set-state! :date-picker/date (get ts :date (t/today)))))
-           state)
-   :will-unmount (fn [state]
-                   (clear-timestamp!)
-                   state)}
+           state)}
   [id format _ts]
   (let [current-command @commands/*current-command
         deadline-or-schedule? (and current-command