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

fixes #7341

Co-authored-by: Gabriel Horner <97210743+logseq-cldwalker@users.noreply.github.com>
This commit is contained in:
sallto
2022-12-14 23:41:08 +01:00
committed by GitHub
parent 04b6bcf582
commit e96c3403bf
3 changed files with 40 additions and 26 deletions

View File

@@ -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')
})

View File

@@ -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?
(if (active?)
(do
(reset! commands/*current-command nil)
(state/clear-editor-action!)
(state/set-timestamp-block! nil))
(do
(reset! show? false)
(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]

View File

@@ -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