feat(datepicker): disabled datepicker clear icon should also be disab… (#1168)

…led. Undefined length error also fixed.

---------

Co-authored-by: Buse Selvi <106681486+buseselvi@users.noreply.github.com>

Author: dilandoogan

src/components/calendar/bl-calendar.ts

@@ -383,10 +383,10 @@ export default class BlCalendar extends DatepickerCalendarMixin {
     if (changedProperties.has("value")) {
       const dates = formatToDateArray(this._value);
 
-      if (!dates?.length) {
+      if (!dates || !Array.isArray(dates) || dates.length === 0) {
         this.handleClearSelectedDates();
       } else {
-        dates?.forEach(date => {
+        dates.forEach(date => {
           this.handleDate(date);
         });
       }

src/components/datepicker/bl-datepicker.css

@@ -13,6 +13,10 @@
   display: grid;
 }
 
+:host([disabled]) .datepicker-content {
+  pointer-events: none;
+}
+
 .datepicker-input {
   width: var(--bl-datepicker-input-width, auto);
   white-space: nowrap;

src/components/datepicker/bl-datepicker.stories.mdx

@@ -28,10 +28,11 @@ export const DatepickerTemplate = (args) => html`
     locale=${ifDefined(args.locale)}
     value=${ifDefined(args.value)}
     style=${ifDefined(args.style)}
-    disabled-dates=${ifDefined(args.disabledDates)}
+    .disabledDates=${args.disabledDates}
+    ?disabled=${args.disabled}
     ?month-year-only=${args.monthYearOnly}
     @bl-datepicker-change=${(e) => {
-      action('bl-datepicker-change')(e)
+      action('bl-datepicker-change')(e.detail)
     }}>${unsafeHTML(args.content)}
   </bl-datepicker>`
 
@@ -116,8 +117,28 @@ You can set dates which you want to disable from Datepicker.
   <Story name="Disabled Dates" args={{
     type: 'multiple',
     label: 'Disabled Dates',
-    placeholder: 'Set disabled dates',
-    disabledDates: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 2)
+    placeholder: 'Select dates (some disabled)',
+    disabledDates: [
+      new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 2),
+      new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 5),
+      new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 8)
+    ]
+  }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Disabled Datepicker
+
+You can disable the entire datepicker to prevent any interaction. The selected date will still be visible.
+
+<Canvas>
+  <Story name="Disabled Datepicker" args={{
+    type: 'single',
+    label: 'Disabled Datepicker',
+    placeholder: 'Select a date',
+    value: new Date(),
+    disabled: true
   }}>
     {Template.bind({})}
   </Story>

src/components/datepicker/bl-datepicker.test.ts

@@ -404,4 +404,47 @@ describe("BlDatepicker", () => {
       expect(element._calendarEl._dates).to.deep.equal([]);
     });
   });
+
+  describe("Disabled State Behavior", () => {
+    beforeEach(async () => {
+      element = await fixture<BlDatePicker>(html`
+        <bl-datepicker type="single" locale="en" disabled></bl-datepicker>`);
+
+      element._calendarEl._dates = [new Date(2024, 0, 15)];
+      element.setDatePickerInput();
+      await element.updateComplete;
+    });
+
+    it("should reflect disabled attribute on host", async () => {
+      expect(element.hasAttribute("disabled")).to.be.true;
+    });
+
+    it("should apply pointer-events none CSS when disabled", async () => {
+      const datepickerContent = element.shadowRoot?.querySelector(".datepicker-content") as HTMLElement;
+      const styles = window.getComputedStyle(datepickerContent);
+
+      expect(styles.pointerEvents).to.equal("none");
+    });
+
+    it("should have disabled clear button when disabled", async () => {
+      const clearButton = element.shadowRoot?.querySelector("bl-button") as BlButton;
+
+      expect(clearButton).to.exist;
+      expect(clearButton.disabled).to.be.true;
+    });
+
+    it("should have disabled input when disabled", async () => {
+      expect(element._inputEl?.hasAttribute("disabled")).to.be.true;
+    });
+
+    it("should not open popover on input click when disabled", async () => {
+      element._popoverEl.hide();
+      await element.updateComplete;
+
+      element._inputEl?.click();
+      await element.updateComplete;
+
+      expect(element._popoverEl.visible).to.be.false;
+    });
+  });
 });

src/components/datepicker/bl-datepicker.ts

@@ -47,7 +47,7 @@ export default class BlDatepicker extends DatepickerCalendarMixin {
   /**
    * Sets datepicker to disabled
    */
-  @property({ type: Boolean })
+  @property({ type: Boolean, reflect: true })
   disabled: boolean;
   /**
    * Defines help text to datepicker input for users

src/utilities/format-to-date-array.test.ts

@@ -36,4 +36,25 @@ describe("normalizeValue", () => {
 
     expect(result).to.deep.equal([]);
   });
+
+  it("should return an empty array when string contains invalid dates", () => {
+    const input = "invalid-date,not-a-date";
+    const result = formatToDateArray(input);
+
+    expect(result).to.deep.equal([]);
+  });
+
+  it("should filter out invalid dates and return valid ones from string", () => {
+    const input = "2023-10-10,invalid-date,2023-10-11";
+    const expected = [new Date("2023-10-10"), new Date("2023-10-11")];
+    const result = formatToDateArray(input);
+
+    expect(result).to.deep.equal(expected);
+  });
+
+  it("should return empty array for non-array, non-date, non-string values", () => {
+    const result = formatToDateArray({} as never);
+
+    expect(result).to.deep.equal([]);
+  });
 });

src/utilities/format-to-date-array.ts

@@ -8,7 +8,8 @@ export function formatToDateArray(value: string | Date | Date[] | undefined): Da
     return stringToDateArray(value);
   } else if (value instanceof Date) {
     return [value];
-  } else {
+  } else if (Array.isArray(value)) {
     return value;
   }
+  return [];
 }