some fixes for calendar selection

Author: ddaribo

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

@@ -516,6 +516,8 @@ describe('Date range picker', () => {
       ) as any;
       expect(separator?.innerText).to.equal('Separator - localized');
     });
+    // TODO
+    it('should set the default placeholder of the single input to the input format (like dd/MM/yyyy - dd/MM/yyyy)', async () => {});
   });
   describe('Methods', () => {
     it('should open/close the picker on invoking show/hide/toggle and not emit events', async () => {
@@ -607,8 +609,37 @@ describe('Date range picker', () => {
         expect(popover?.hasAttribute('open')).to.equal(false);
       });
 
-      // TODO
-      it('should swap the selected dates if the end is earlier than the start', async () => {});
+      it('should swap the selected dates after input if the end is earlier than the start', async () => {
+        const eventSpy = spy(picker, 'emitEvent');
+        const aMonthAgo = today.add('month', -1);
+        picker.value = null;
+        await elementUpdated(picker);
+
+        dateTimeInputs[0].focus();
+        await elementUpdated(dateTimeInputs[0]);
+        expect(isFocused(dateTimeInputs[0])).to.be.true;
+
+        simulateKeyboard(dateTimeInputs[0], arrowUp);
+        await elementUpdated(picker);
+
+        expect(eventSpy).calledWith('igcInput');
+        eventSpy.resetHistory();
+
+        dateTimeInputs[1].focus();
+        // first arrow sets today, second sets aMonthAgo
+        simulateKeyboard(dateTimeInputs[1], arrowDown);
+        simulateKeyboard(dateTimeInputs[1], arrowDown);
+        await elementUpdated(picker);
+
+        dateTimeInputs[1].blur();
+        await elementUpdated(picker);
+
+        expect(eventSpy).calledWith('igcChange');
+        checkSelectedRange(picker, {
+          start: aMonthAgo.native,
+          end: today.native,
+        });
+      });
 
       it('should select a range of dates in dialog mode and emit igcChange when done is clicked', async () => {
         const eventSpy = spy(picker, 'emitEvent');
@@ -1070,8 +1101,7 @@ describe('Date range picker', () => {
         expect(picker.open).to.be.true;
       });
 
-      it('should not open the picker in dropdown mode when clicking the clear icon', async () => {
-        // TODO -elaborate test scenario?
+      it('should clear the inputs on clicking the clear icon - two inputs', async () => {
         picker.value = { start: today.native, end: tomorrow.native };
         await elementUpdated(picker);
 
@@ -1080,25 +1110,42 @@ describe('Date range picker', () => {
 
         expect(picker.open).to.be.false;
         expect(picker.value).to.deep.equal({ start: null, end: null });
+        expect(dateTimeInputs[0].value).to.be.null;
+        expect(dateTimeInputs[1].value).to.be.null;
       });
 
-      it('should not open the picker in dialog mode when clicking the clear icon', async () => {
-        // TODO -elaborate test scenario?
-        picker.mode = 'dialog';
+      it('should clear the inputs on clicking the clear icon - single input', async () => {
+        picker.useTwoInputs = false;
         picker.value = { start: today.native, end: tomorrow.native };
         await elementUpdated(picker);
 
         simulateClick(getIcon(picker, clearIcon));
         await elementUpdated(picker);
 
         expect(picker.open).to.be.false;
-        picker.value = { start: null, end: null };
+        expect(picker.value).to.deep.equal({ start: null, end: null });
+        const input = picker.renderRoot!.querySelector(
+          IgcInputComponent.tagName
+        )!;
+        expect(input.value).to.equal('');
       });
 
-      // TODO
-      it('should emit igcInput and igcChange on input value change', async () => {});
+      it('should emit igcInput and igcChange on input value change', async () => {
+        const eventSpy = spy(picker, 'emitEvent');
+
+        dateTimeInputs[0].focus();
+        await elementUpdated(dateTimeInputs[0]);
+        expect(isFocused(dateTimeInputs[0])).to.be.true;
+
+        simulateKeyboard(dateTimeInputs[0], arrowUp);
+        await elementUpdated(picker);
+
+        expect(eventSpy).calledWith('igcInput');
+        eventSpy.resetHistory();
 
-      it('should not swap the dates while typing', async () => {});
+        simulateKeyboard(dateTimeInputs[0], arrowDown);
+        await elementUpdated(picker);
+      });
 
       it('should set the calendar active date to the start of the range while typing', async () => {});
     });
@@ -1751,9 +1798,12 @@ const checkSelectedRange = (
     IgcCalendarComponent.tagName
   )!;
 
-  checkDatesEqual(picker.value?.start!, expectedValue?.start!);
-  checkDatesEqual(picker.value?.end!, expectedValue?.end!);
-
+  if (expectedValue?.start) {
+    checkDatesEqual(picker.value?.start!, expectedValue.start);
+  }
+  if (expectedValue?.end) {
+    checkDatesEqual(picker.value?.end!, expectedValue.end);
+  }
   if (!useTwoInputs) {
     const input = picker.renderRoot.querySelector(IgcInputComponent.tagName)!;
     const start = expectedValue?.start
@@ -1775,8 +1825,12 @@ const checkSelectedRange = (
     const inputs = picker.renderRoot.querySelectorAll(
       IgcDateTimeInputComponent.tagName
     );
-    checkDatesEqual(inputs[0].value!, expectedValue?.start!);
-    checkDatesEqual(inputs[1].value!, expectedValue?.end!);
+    if (expectedValue?.start) {
+      checkDatesEqual(inputs[0].value!, expectedValue.start);
+    }
+    if (expectedValue?.end) {
+      checkDatesEqual(inputs[1].value!, expectedValue.end);
+    }
   }
 
   if (expectedValue?.start) {

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

@@ -303,11 +303,12 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
     const converted = convertToDateRange(value);
     this._startDate = converted?.start ?? null;
     this._endDate = converted?.end ?? null;
-    this.setCalendarRangeValues();
-    this.updateMaskedRangeValue();
 
     this._formValue.setValueAndFormState(converted);
     this._validate();
+
+    this.setCalendarRangeValues();
+    this.updateMaskedRangeValue();
   }
 
   public get value(): DateRangeValue | null {
@@ -705,6 +706,7 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
     } else {
       this._endDate = newValue;
     }
+    this._calendar.activeDate = newValue;
 
     this.value = { start: this._startDate, end: this._endDate };
     this.emitEvent('igcInput', { detail: this.value });
@@ -739,6 +741,7 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
     this._defaultMask = DateTimeUtil.getDefaultMask(this.locale);
     if (this._inputs[0] && this._inputs[1]) {
       this._inputs[0].locale = this.locale;
+      this._inputs[1].locale = this.locale;
     }
     this.updateMaskedRangeValue();
   }
@@ -895,7 +898,6 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
   /** Clears the input parts of the component of any user input */
   public clear() {
     this.value = null;
-    this._activeDate = this._startDate ?? new Date();
     this._inputs[0]?.clear();
     this._inputs[1]?.clear();
   }