Merge fe7d60c into ce1918e

src/components/date-picker/date-picker.spec.ts

@@ -18,6 +18,7 @@ import {
   FormAssociatedTestBed,
   simulateClick,
   simulateKeyboard,
+  simulatePointerDown,
 } from '../common/utils.spec.js';
 import IgcDateTimeInputComponent from '../date-time-input/date-time-input.js';
 import IgcDatePickerComponent from './date-picker.js';
@@ -1003,6 +1004,29 @@ describe('Date picker', () => {
       spec.submitValidates();
     });
   });
+
+  describe('Initial validation', () => {
+    it('should not enter in invalid state when clicking the calendar toggle part', async () => {
+      picker = await fixture(
+        html`<igc-date-picker required></igc-date-picker>`
+      );
+      dateTimeInput = picker.renderRoot.querySelector(
+        IgcDateTimeInputComponent.tagName
+      )!;
+      const icon = picker.renderRoot.querySelector(
+        `[name='${pickerShowIcon}']`
+      )!;
+
+      expect(picker.invalid).to.be.false;
+      expect(dateTimeInput.invalid).to.be.false;
+
+      simulatePointerDown(icon);
+      await elementUpdated(picker);
+
+      expect(picker.invalid).to.be.false;
+      expect(dateTimeInput.invalid).to.be.false;
+    });
+  });
 });
 
 const selectCurrentDate = (calendar: IgcCalendarComponent) => {

src/components/date-picker/date-picker.ts

@@ -174,6 +174,7 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
     },
   ];
 
+  /* blazorSuppress */
   public static register() {
     registerComponent(
       IgcDatePickerComponent,
@@ -454,6 +455,9 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
   constructor() {
     super();
 
+    this.addEventListener('focusin', this.handleFocusIn);
+    this.addEventListener('focusout', this.handleFocusOut);
+
     addKeybindings(this, {
       skip: () => this.disabled,
       bindingDefaults: { preventDefault: true },
@@ -521,6 +525,24 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
     }
   }
 
+  protected handleFocusIn() {
+    this._dirty = true;
+  }
+
+  protected handleFocusOut({ relatedTarget }: FocusEvent) {
+    if (!this.contains(relatedTarget as Node)) {
+      this.checkValidity();
+    }
+  }
+
+  protected handlerCalendarIconSlotPointerDown(event: PointerEvent) {
+    // This is where the delegateFocus of the underlying input is a chore.
+    // If we have a required validator we don't want the input to enter an invalid
+    // state right off the bat when opening the picker which will happen since focus is transferred to the calendar element.
+    // So we call preventDefault on the event in order to not focus the input and trigger its validation logic on blur.
+    event.preventDefault();
+  }
+
   protected handleInputClick(event: Event) {
     if (findElementFromEventPath('input', event)) {
       // Open only if the click originates from the underlying input
@@ -633,7 +655,12 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
     const state = this.open ? 'calendar-icon-open' : 'calendar-icon';
 
     return html`
-      <span slot="prefix" part=${state} @click=${this.handleAnchorClick}>
+      <span
+        slot="prefix"
+        part=${state}
+        @pointerdown=${this.handlerCalendarIconSlotPointerDown}
+        @click=${this.handleAnchorClick}
+      >
         <slot name=${state}>${defaultIcon}</slot>
       </span>
     `;

stories/divider.stories.ts

@@ -21,6 +21,12 @@ const metadata: Meta<IgcDividerComponent> = {
     },
   },
   argTypes: {
+    vertical: {
+      type: 'boolean',
+      description: 'Whether to render a vertical divider line.',
+      control: 'boolean',
+      table: { defaultValue: { summary: false } },
+    },
     middle: {
       type: 'boolean',
       description:
@@ -36,12 +42,14 @@ const metadata: Meta<IgcDividerComponent> = {
       table: { defaultValue: { summary: 'solid' } },
     },
   },
-  args: { middle: false, type: 'solid' },
+  args: { vertical: false, middle: false, type: 'solid' },
 };
 
 export default metadata;
 
 interface IgcDividerArgs {
+  /** Whether to render a vertical divider line. */
+  vertical: boolean;
   /** When set and inset is provided, it will shrink the divider line from both sides. */
   middle: boolean;
   /** Whether to render a solid or a dashed divider line. */