Fix page publication fields checkbox handling

app/javascript/alchemy_admin/components/page_publication_fields.js

@@ -1,8 +1,12 @@
 // Handles the page publication date fields
 export class PagePublicationFields extends HTMLElement {
   connectedCallback() {
-    const public_on_field = this.querySelector("#page_public_on")
-    const public_until_field = this.querySelector("#page_public_until")
+    const public_on_picker = this.querySelector(
+      "alchemy-datepicker:has(#page_public_on)"
+    )
+    const public_until_picker = this.querySelector(
+      "alchemy-datepicker:has(#page_public_until)"
+    )
     const publication_date_fields = this.querySelector(
       ".page-publication-date-fields"
     )
@@ -16,12 +20,12 @@ export class PagePublicationFields extends HTMLElement {
 
       if (checkbox.checked) {
         publication_date_fields.classList.remove("hidden")
-        public_on_field._flatpickr.setDate(now)
+        public_on_picker.flatpickr.setDate(now)
       } else {
         publication_date_fields.classList.add("hidden")
-        public_on_field.value = ""
+        public_on_picker.flatpickr.clear()
       }
-      public_until_field.value = ""
+      public_until_picker.flatpickr?.clear()
     })
   }
 }

spec/javascript/alchemy_admin/components/page_publication_fields.spec.js

@@ -12,27 +12,44 @@ describe("alchemy-page-publication-fields", () => {
   let publicUntilField = undefined
   let publicationDateFields = undefined
 
+  let publicOnPicker = undefined
+  let publicUntilPicker = undefined
+
   beforeEach(() => {
     const html = `
       <alchemy-page-publication-fields>
         <input type="checkbox" id="page_public">
         <div class="page-publication-date-fields hidden">
-          <input type="text" id="page_public_on">
-          <input type="text" id="page_public_until">
+          <alchemy-datepicker>
+            <input type="text" id="page_public_on">
+          </alchemy-datepicker>
+          <alchemy-datepicker>
+            <input type="text" id="page_public_until">
+          </alchemy-datepicker>
         </div>
       </alchemy-page-publication-fields>
     `
     component = renderComponent("alchemy-page-publication-fields", html)
     publicCheckbox = component.querySelector("#page_public")
     publicOnField = component.querySelector("#page_public_on")
     publicUntilField = component.querySelector("#page_public_until")
+    publicOnPicker = component.querySelector(
+      "alchemy-datepicker:has(#page_public_on)"
+    )
+    publicUntilPicker = component.querySelector(
+      "alchemy-datepicker:has(#page_public_until)"
+    )
     publicationDateFields = component.querySelector(
       ".page-publication-date-fields"
     )
 
-    // Mock flatpickr instance on the public_on field
-    publicOnField._flatpickr = {
-      setDate: vi.fn()
+    // Mock flatpickr instance on the alchemy-datepicker components
+    publicOnPicker.flatpickr = {
+      setDate: vi.fn(),
+      clear: vi.fn()
+    }
+    publicUntilPicker.flatpickr = {
+      clear: vi.fn()
     }
   })
 
@@ -47,15 +64,14 @@ describe("alchemy-page-publication-fields", () => {
     })
 
     it("sets the public_on date to now", () => {
-      expect(publicOnField._flatpickr.setDate).toHaveBeenCalled()
-      const calledWith = publicOnField._flatpickr.setDate.mock.calls[0][0]
+      expect(publicOnPicker.flatpickr.setDate).toHaveBeenCalled()
+      const calledWith = publicOnPicker.flatpickr.setDate.mock.calls[0][0]
       expect(calledWith).toBeInstanceOf(Date)
     })
 
     it("clears the public_until field", () => {
-      publicUntilField.value = "2025-12-31"
       publicCheckbox.dispatchEvent(new Event("click", { bubbles: true }))
-      expect(publicUntilField.value).toEqual("")
+      expect(publicUntilPicker.flatpickr.clear).toHaveBeenCalled()
     })
   })
 
@@ -72,16 +88,16 @@ describe("alchemy-page-publication-fields", () => {
       expect(publicationDateFields.classList.contains("hidden")).toBeTruthy()
     })
 
-    it("clears the public_on field value", () => {
-      expect(publicOnField.value).toEqual("")
+    it("clears the public_on field via flatpickr", () => {
+      expect(publicOnPicker.flatpickr.clear).toHaveBeenCalled()
     })
 
-    it("clears the public_until field value", () => {
-      expect(publicUntilField.value).toEqual("")
+    it("clears the public_until field via flatpickr", () => {
+      expect(publicUntilPicker.flatpickr.clear).toHaveBeenCalled()
     })
 
     it("does not call flatpickr setDate", () => {
-      expect(publicOnField._flatpickr.setDate).not.toHaveBeenCalled()
+      expect(publicOnPicker.flatpickr.setDate).not.toHaveBeenCalled()
     })
   })
 
@@ -90,8 +106,12 @@ describe("alchemy-page-publication-fields", () => {
       const html = `
         <alchemy-page-publication-fields>
           <div class="page-publication-date-fields hidden">
-            <input type="text" id="page_public_on">
-            <input type="text" id="page_public_until">
+            <alchemy-datepicker>
+              <input type="text" id="page_public_on">
+            </alchemy-datepicker>
+            <alchemy-datepicker>
+              <input type="text" id="page_public_until">
+            </alchemy-datepicker>
           </div>
         </alchemy-page-publication-fields>
       `
@@ -107,19 +127,19 @@ describe("alchemy-page-publication-fields", () => {
       publicCheckbox.checked = true
       publicCheckbox.dispatchEvent(new Event("click", { bubbles: true }))
       expect(publicationDateFields.classList.contains("hidden")).toBeFalsy()
-      expect(publicOnField._flatpickr.setDate).toHaveBeenCalledTimes(1)
+      expect(publicOnPicker.flatpickr.setDate).toHaveBeenCalledTimes(1)
 
       // Uncheck
       publicCheckbox.checked = false
       publicCheckbox.dispatchEvent(new Event("click", { bubbles: true }))
       expect(publicationDateFields.classList.contains("hidden")).toBeTruthy()
-      expect(publicOnField.value).toEqual("")
+      expect(publicOnPicker.flatpickr.clear).toHaveBeenCalledTimes(1)
 
       // Check again
       publicCheckbox.checked = true
       publicCheckbox.dispatchEvent(new Event("click", { bubbles: true }))
       expect(publicationDateFields.classList.contains("hidden")).toBeFalsy()
-      expect(publicOnField._flatpickr.setDate).toHaveBeenCalledTimes(2)
+      expect(publicOnPicker.flatpickr.setDate).toHaveBeenCalledTimes(2)
     })
   })
 })