Emitting igcChange when the user clicks outside of the dialog and adding test

Author: Ivan Kitanov

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

@@ -803,6 +803,32 @@ describe('Date range picker', () => {
         expect(dialog?.hasAttribute('open')).to.equal(false);
       });
 
+      it('should select a range of dates in dialog mode and emit igcChange when clicked outside of dialog', async () => {
+        const eventSpy = spy(picker, 'emitEvent');
+
+        picker.mode = 'dialog';
+        await elementUpdated(picker);
+
+        picker.open = true;
+        await elementUpdated(picker);
+        await selectDates(today, tomorrow, calendar);
+
+        expect(eventSpy).not.to.be.calledWith('igcChange');
+        let dialog = picker.renderRoot.querySelector('igc-dialog');
+        expect(dialog?.hasAttribute('open')).to.equal(true);
+
+        simulateClick(document.body);
+        await elementUpdated(picker);
+        expect(eventSpy).calledWith('igcChange');
+        checkSelectedRange(picker, {
+          start: today.native,
+          end: tomorrow.native,
+        });
+
+        dialog = picker.renderRoot.querySelector('igc-dialog');
+        expect(dialog?.hasAttribute('open')).to.equal(false);
+      });
+
       it('should not emit igcChange when cancel is clicked and the value should be the initial value', async () => {
         const eventSpy = spy(picker, 'emitEvent');
 

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

@@ -634,7 +634,7 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
 
   protected handleDialogClosing(event: Event) {
     event.stopPropagation();
-    this.revertValue();
+    this.emitEvent('igcChange', { detail: this.value });
     this._hide(true);
   }