refactor(drp): some more code changes

Author: ddaribo

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

@@ -587,12 +587,8 @@ describe('Date range picker - single input', () => {
         picker.readOnly = true;
         await elementUpdated(picker);
 
-        input.focus();
-        await elementUpdated(input);
         simulateClick(getIcon(picker, clearIcon));
         await elementUpdated(picker);
-        input.blur();
-        await elementUpdated(input);
 
         expect(picker.value).to.deep.equal(testValue);
         expect(eventSpy).not.called;

src/components/date-range-picker/date-range-picker-single.validation.spec.ts

@@ -46,7 +46,7 @@ describe('Date Range Picker Single Input - Form integration', () => {
       expect(spec.element.form).to.equal(spec.form);
     });
 
-    it('should not participate in form submission if the value is empty/invalid', async () => {
+    it('should not participate in form submission if the value is empty/invalid', () => {
       value = { start: null, end: null };
       spec.setProperties({ value });
       spec.assertSubmitHasKeyValue('rangePicker', null);
@@ -76,7 +76,7 @@ describe('Date Range Picker Single Input - Form integration', () => {
       expect(input.value).to.equal('');
     });
 
-    it('should not be in invalid state on reset for a required control which previously had value', async () => {
+    it('should not be in invalid state on reset for a required control which previously had value', () => {
       spec.setProperties({ value: value });
       spec.setProperties({ required: true });
 
@@ -446,7 +446,7 @@ describe('Date Range Picker Single Input - Form integration', () => {
       endKey = `${spec.element.name}-end`;
     });
 
-    it('correct initial state', async () => {
+    it('correct initial state', () => {
       spec.assertIsPristine();
       checkSelectedRange(spec.element, value, false);
     });
@@ -469,7 +469,7 @@ describe('Date Range Picker Single Input - Form integration', () => {
     });
   });
   describe('Validation message slots', () => {
-    it('', async () => {
+    it('', () => {
       const now = CalendarDay.today;
       const tomorrow = now.add('day', 1);
       const yesterday = now.add('day', -1);

src/components/date-range-picker/date-range-picker-two-inputs.spec.ts

@@ -608,11 +608,7 @@ describe('Date range picker - two inputs', () => {
         picker.readOnly = true;
         await elementUpdated(picker);
 
-        dateTimeInputs[0].focus();
-        await elementUpdated(dateTimeInputs[0]);
         simulateClick(getIcon(picker, clearIcon));
-        dateTimeInputs[0].blur();
-        await elementUpdated(dateTimeInputs[0]);
 
         expect(picker.value).to.deep.equal(testValue);
         expect(eventSpy).not.called;

src/components/date-range-picker/date-range-picker-two-inputs.validation.spec.ts

@@ -9,7 +9,6 @@ import {
   simulateClick,
 } from '../common/utils.spec.js';
 import IgcDateTimeInputComponent from '../date-time-input/date-time-input.js';
-import IgcInputComponent from '../input/input.js';
 import IgcDateRangePickerComponent, {
   type DateRangeValue,
 } from './date-range-picker.js';
@@ -23,7 +22,7 @@ describe('Date Range Picker Two Inputs - Form integration', () => {
   before(() => defineComponents(IgcDateRangePickerComponent));
 
   let picker: IgcDateRangePickerComponent;
-  let dateTimeInputs: Array<IgcDateTimeInputComponent>;
+  let dateTimeInputs: IgcDateTimeInputComponent[];
 
   const today = CalendarDay.today;
   const tomorrow = today.add('day', 1);
@@ -54,7 +53,7 @@ describe('Date Range Picker Two Inputs - Form integration', () => {
       expect(spec.element.form).to.equal(spec.form);
     });
 
-    it('should not participate in form submission if the value is empty/invalid', async () => {
+    it('should not participate in form submission if the value is empty/invalid', () => {
       value = { start: null, end: null };
       spec.setProperties({ value });
       spec.assertSubmitHasKeyValue(startKey, null);
@@ -380,24 +379,6 @@ describe('Date Range Picker Two Inputs - Form integration', () => {
       expect(picker.invalid).to.be.false;
       await checkInputsInvalidState(picker, false, false);
     });
-
-    it('should not enter in invalid state when clicking the calendar toggle part - single input', async () => {
-      picker = await fixture<IgcDateRangePickerComponent>(
-        html`<igc-date-range-picker required></igc-date-range-picker>`
-      );
-      const input = picker.renderRoot.querySelector(
-        IgcInputComponent.tagName
-      ) as IgcInputComponent;
-
-      expect(picker.invalid).to.be.false;
-      expect(input.invalid).to.be.false;
-
-      simulateClick(getIcon(picker, toggleIcon));
-      await elementUpdated(picker);
-
-      expect(picker.invalid).to.be.false;
-      expect(input.invalid).to.be.false;
-    });
   });
 
   describe('defaultValue', () => {
@@ -422,7 +403,7 @@ describe('Date Range Picker Two Inputs - Form integration', () => {
       endKey = `${spec.element.name}-end`;
     });
 
-    it('correct initial state', async () => {
+    it('correct initial state', () => {
       spec.assertIsPristine();
       checkSelectedRange(spec.element, value);
     });
@@ -445,7 +426,7 @@ describe('Date Range Picker Two Inputs - Form integration', () => {
     });
   });
   describe('Validation message slots', () => {
-    it('', async () => {
+    it('', () => {
       const now = CalendarDay.today;
       const tomorrow = now.add('day', 1);
       const yesterday = now.add('day', -1);

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

@@ -206,8 +206,6 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
     delegatesFocus: true,
   };
 
-  private static readonly increment = createCounter();
-
   /* blazorSuppress */
   public static register() {
     registerComponent(
@@ -226,6 +224,8 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
 
   // #region Internal state & properties
 
+  private static readonly increment = createCounter();
+
   protected inputId = `date-range-picker-${IgcDateRangePickerComponent.increment()}`;
   protected override _formValue: FormValue<DateRangeValue | null>;
 
@@ -257,25 +257,25 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
   private _maskedRangeValue = '';
 
   @queryAll(IgcDateTimeInputComponent.tagName)
-  private _inputs!: IgcDateTimeInputComponent[];
+  private readonly _inputs!: IgcDateTimeInputComponent[];
 
   @query(IgcInputComponent.tagName)
-  private _input!: IgcInputComponent;
+  private readonly _input!: IgcInputComponent;
 
   @query(IgcCalendarComponent.tagName)
-  private _calendar!: IgcCalendarComponent;
+  private readonly _calendar!: IgcCalendarComponent;
 
   @queryAssignedElements({ slot: 'prefix' })
-  private _prefixes!: HTMLElement[];
+  private readonly _prefixes!: HTMLElement[];
 
   @queryAssignedElements({ slot: 'suffix' })
-  private _suffixes!: HTMLElement[];
+  private readonly _suffixes!: HTMLElement[];
 
   @queryAssignedElements({ slot: 'actions' })
-  private _actions!: HTMLElement[];
+  private readonly _actions!: HTMLElement[];
 
   @queryAssignedElements({ slot: 'header-date' })
-  private _headerDateSlotItems!: HTMLElement[];
+  private readonly _headerDateSlotItems!: HTMLElement[];
 
   // #endregion
 
@@ -611,7 +611,12 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
 
   /** Clears the input parts of the component of any user input */
   public clear() {
-    this._clear(false);
+    this._oldValue = this.value;
+    this.value = null;
+    if (this.useTwoInputs) {
+      this._inputs[0]?.clear();
+      this._inputs[1]?.clear();
+    }
   }
 
   /** Selects a date range value in the picker */
@@ -627,7 +632,7 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
   protected _openChange() {
     this._rootClickController.update();
 
-    if (this.open && this.mode === 'dialog') {
+    if (this.open) {
       this._oldValue = this.value;
     }
   }
@@ -1040,16 +1045,12 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
   }
 
   protected _renderActions() {
-    const slot =
-      this._isDropDown || isEmpty(this._actions) ? undefined : 'footer';
+    const hasActions = !isEmpty(this._actions);
+    const slot = this._isDropDown || hasActions ? undefined : 'footer';
 
     // If in dialog mode use the dialog footer slot
     return html`
-      <div
-        part="actions"
-        ?hidden=${isEmpty(this._actions)}
-        slot=${ifDefined(slot)}
-      >
+      <div part="actions" ?hidden=${!hasActions} slot=${ifDefined(slot)}>
         <slot name="actions"></slot>
       </div>
     `;
@@ -1204,7 +1205,7 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
 }
 
 declare global {
-  interface HtmlElementTagNameMap {
+  interface HTMLElementTagNameMap {
     'igc-date-range-picker': IgcDateRangePickerComponent;
   }
 }

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

@@ -75,7 +75,7 @@ export const checkSelectedRange = (
     const length = calendar.values.length;
     checkDatesEqual(calendar.values[length - 1], expectedValue?.end!);
   }
-  if (!expectedValue?.start && !expectedValue?.end) {
+  if (!(expectedValue?.start || expectedValue?.end)) {
     expect(calendar.values).to.deep.equal([]);
   }
 };