fix(drp): handle readonly state

Author: ddaribo

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

@@ -467,45 +467,93 @@ describe('Date range picker - common tests for single and two inputs mode', () =
           expect(eventSpy).calledWith('igcClosing');
           expect(eventSpy).calledWith('igcClosed');
         });
-      });
-      describe('Interactions with the show icon', () => {
-        it('should open the picker on calendar show icon click in dropdown mode', async () => {
-          simulateClick(getIcon(picker, toggleIcon));
-          await elementUpdated(picker);
 
-          expect(picker.open).to.be.true;
-        });
-        it('should open the picker on calendar show icon click in dialog mode', async () => {
-          picker.mode = 'dialog';
-          await elementUpdated(picker);
+        describe('Interactions with the show icon', () => {
+          it('should open the picker on calendar show icon click in dropdown mode', async () => {
+            simulateClick(getIcon(picker, toggleIcon));
+            await elementUpdated(picker);
 
-          simulateClick(getIcon(picker, toggleIcon));
-          await elementUpdated(picker);
+            expect(picker.open).to.be.true;
+          });
+          it('should open the picker on calendar show icon click in dialog mode', async () => {
+            picker.mode = 'dialog';
+            await elementUpdated(picker);
 
-          expect(picker.open).to.be.true;
-        });
-        it('should not open the picker on calendar show icon click in dropdown mode when readOnly is true', async () => {
-          picker.readOnly = true;
-          await elementUpdated(picker);
+            simulateClick(getIcon(picker, toggleIcon));
+            await elementUpdated(picker);
 
-          simulateClick(getIcon(picker, toggleIcon));
-          await elementUpdated(picker);
-
-          expect(picker.open).to.be.false;
+            expect(picker.open).to.be.true;
+          });
         });
-        it('should not open the picker on calendar show icon click in dialog mode when readOnly is true', async () => {
-          picker.mode = 'dialog';
-          picker.readOnly = true;
-          await elementUpdated(picker);
-
-          simulateClick(getIcon(picker, toggleIcon));
-          await elementUpdated(picker);
-
-          expect(picker.open).to.be.false;
+      });
+      describe('Readonly state', () => {
+        describe('Dropdown mode', () => {
+          beforeEach(async () => {
+            picker.readOnly = true;
+            picker.value = { start: today.native, end: tomorrow.native };
+            await elementUpdated(picker);
+          });
+
+          it('should not show the picker on calendar icon click', async () => {
+            simulateClick(getIcon(picker, toggleIcon));
+            await elementUpdated(picker);
+
+            expect(picker.open).to.be.false;
+          });
+
+          it('should not show the picker on keyboard shortcut', async () => {
+            simulateKeyboard(picker, [altKey, arrowDown]);
+            await elementUpdated(picker);
+
+            expect(picker.open).to.be.false;
+          });
+
+          it('should not clear the value by clicking on the clear icon', async () => {
+            simulateClick(getIcon(picker, toggleIcon));
+            await elementUpdated(picker);
+
+            checkSelectedRange(
+              picker,
+              { start: today.native, end: tomorrow.native },
+              false
+            );
+          });
+        });
+        describe('Dialog mode', () => {
+          beforeEach(async () => {
+            picker.readOnly = true;
+            picker.mode = 'dialog';
+            picker.value = { start: today.native, end: tomorrow.native };
+            await elementUpdated(picker);
+          });
+
+          it('should not show the picker on calendar icon click', async () => {
+            simulateClick(getIcon(picker, toggleIcon));
+            await elementUpdated(picker);
+
+            expect(picker.open).to.be.false;
+          });
+
+          it('should not show the picker on keyboard shortcut', async () => {
+            simulateKeyboard(picker, [altKey, arrowDown]);
+            await elementUpdated(picker);
+
+            expect(picker.open).to.be.false;
+          });
+
+          it('should not clear the value by clicking on the clear icon', async () => {
+            simulateClick(getIcon(picker, toggleIcon));
+            await elementUpdated(picker);
+
+            checkSelectedRange(
+              picker,
+              { start: today.native, end: tomorrow.native },
+              false
+            );
+          });
         });
       });
     });
-    //TODO - check that the component is rendered, etc.
     describe('Predefined ranges', () => {
       const previousThreeDaysStart = CalendarDay.today.add('day', -3).native;
       const nextThreeDaysEnd = CalendarDay.today.add('day', 3).native;

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

@@ -588,7 +588,7 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
     this.addEventListener('focusout', this._handleFocusOut);
 
     addKeybindings(this, {
-      skip: () => this.disabled,
+      skip: () => this.disabled || this.readOnly,
       bindingDefaults: { preventDefault: true },
     })
       .set([altKey, arrowDown], this.handleAnchorClick)
@@ -980,7 +980,7 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
           <span
             slot="suffix"
             part="${clearIcon}"
-            @click=${() => this._clear(true)}
+            @click=${this.readOnly ? nothing : this.clear}
           >
             <slot name="${clearIcon}">
               <igc-icon