fix: Click behaviors around input parts in dialog mode

IgniteUI · Jun 6, 2024 · 7c05ca0 · 7c05ca0
1 parent 2a6e15a
commit 7c05ca0
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 20 deletions.
diff --git a/src/components/date-picker/date-picker.spec.ts b/src/components/date-picker/date-picker.spec.ts
@@ -25,10 +25,20 @@ import IgcDatePickerComponent from './date-picker.js';
 describe('Date picker', () => {
   before(() => defineComponents(IgcDatePickerComponent));
 
+  const pickerShowIcon = 'calendar_today';
+  const pickerClearIcon = 'clear';
+
+  function getIcon(name: string) {
+    return picker.renderRoot.querySelector(`[name='${name}']`)!;
+  }
+
+  function getLabel() {
+    return picker.renderRoot.querySelector('label')!;
+  }
+
   let picker: IgcDatePickerComponent;
   let dateTimeInput: IgcDateTimeInputComponent;
   let calendar: IgcCalendarComponent;
-  let calendarShowIcon: HTMLElement;
 
   beforeEach(async () => {
     picker = await fixture<IgcDatePickerComponent>(
@@ -39,7 +49,6 @@ describe('Date picker', () => {
     )!;
 
     calendar = picker.renderRoot.querySelector(IgcCalendarComponent.tagName)!;
-    calendarShowIcon = picker.renderRoot.querySelector('#anchor-icon')!;
   });
 
   describe('Rendering and initialization', () => {
@@ -796,7 +805,7 @@ describe('Date picker', () => {
     });
 
     it('should open the picker on calendar show icon click in dropdown mode', async () => {
-      simulateClick(calendarShowIcon);
+      simulateClick(getIcon(pickerShowIcon));
       await elementUpdated(picker);
 
       expect(picker.open).to.be.true;
@@ -813,7 +822,7 @@ describe('Date picker', () => {
       picker.mode = 'dialog';
       await elementUpdated(picker);
 
-      simulateClick(calendarShowIcon);
+      simulateClick(getIcon(pickerShowIcon));
       await elementUpdated(picker);
 
       expect(picker.open).to.be.true;
@@ -823,7 +832,51 @@ describe('Date picker', () => {
       picker.mode = 'dialog';
       await elementUpdated(picker);
 
-      simulateClick(dateTimeInput);
+      simulateClick(dateTimeInput.renderRoot.querySelector('input')!);
+      await elementUpdated(picker);
+
+      expect(picker.open).to.be.true;
+    });
+
+    it('should not open the picker in dropdown mode when clicking the clear icon', async () => {
+      picker.value = new Date();
+      await elementUpdated(picker);
+
+      simulateClick(getIcon(pickerClearIcon));
+      await elementUpdated(picker);
+
+      expect(picker.open).to.be.false;
+      expect(picker.value).to.be.null;
+    });
+
+    it('should not open the picker in dialog mode when clicking the clear icon', async () => {
+      picker.mode = 'dialog';
+      picker.value = new Date();
+      await elementUpdated(picker);
+
+      simulateClick(getIcon(pickerClearIcon));
+      await elementUpdated(picker);
+
+      expect(picker.open).to.be.false;
+      expect(picker.value).to.be.null;
+    });
+
+    it('should not open the picker in dropdown mode when clicking the label', async () => {
+      picker.label = 'Label';
+      await elementUpdated(picker);
+
+      simulateClick(getLabel());
+      await elementUpdated(picker);
+
+      expect(picker.open).to.be.false;
+    });
+
+    it('should open the picker in dialog mode when clicking the label', async () => {
+      picker.label = 'Label';
+      picker.mode = 'dialog';
+      await elementUpdated(picker);
+
+      simulateClick(getLabel());
       await elementUpdated(picker);
 
       expect(picker.open).to.be.true;

diff --git a/src/components/date-picker/date-picker.ts b/src/components/date-picker/date-picker.ts
@@ -475,9 +475,7 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
   }
 
   /** Clears the input part of the component of any user input */
-  public clear(event: Event) {
-    // Don't propagate the event to the input to not open the dialog in dialog mode
-    event.stopPropagation();
+  public clear() {
     this.value = null;
     this._input?.clear();
   }
@@ -524,12 +522,10 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
   }
 
   protected handleInputClick(event: Event) {
-    if (findElementFromEventPath('#anchor-icon', event)) {
-      // Click events originating from the calendar show icon are ignored
-      return;
+    if (findElementFromEventPath('input', event)) {
+      // Open only if the click originates from the underlying input
+      this.handleAnchorClick();
     }
-
-    this.handleAnchorClick();
   }
 
   protected override async handleAnchorClick() {
@@ -637,12 +633,7 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
     const state = this.open ? 'calendar-icon-open' : 'calendar-icon';
 
     return html`
-      <span
-        id="anchor-icon"
-        slot="prefix"
-        part=${state}
-        @click=${this.handleAnchorClick}
-      >
+      <span slot="prefix" part=${state} @click=${this.handleAnchorClick}>
         <slot name=${state}>${defaultIcon}</slot>
       </span>
     `;
@@ -724,7 +715,12 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
 
   private renderLabel(id: string) {
     return this.label
-      ? html`<label part="label" for=${id}>${this.label}</label>`
+      ? html`<label
+          part="label"
+          for=${id}
+          @click=${this.isDropDown ? nothing : this.handleAnchorClick}
+          >${this.label}</label
+        >`
       : nothing;
   }