Skip to content

Commit 659db27

Browse files
ddariboddaribo
committed
fix(drp): don't show dialog on input click when readonly + add tests
1 parent 7c6845d commit 659db27

File tree

4 files changed

+120
-60
lines changed

4 files changed

+120
-60
lines changed

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

Lines changed: 35 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -126,21 +126,6 @@ describe('Date range picker - single input', () => {
126126
checkSelectedRange(picker, expectedValue, false);
127127
});
128128

129-
it('should not modify value through selection when readOnly is true', async () => {
130-
const eventSpy = spy(picker, 'emitEvent');
131-
picker.readOnly = true;
132-
await elementUpdated(picker);
133-
expect(picker.value).to.deep.equal({ start: null, end: null });
134-
135-
await picker.show();
136-
137-
calendar = picker.renderRoot.querySelector(IgcCalendarComponent.tagName)!;
138-
await selectDates(today, tomorrow, calendar);
139-
expect(picker.value).to.deep.equal({ start: null, end: null });
140-
expect(calendar.values).to.deep.equal([]);
141-
expect(eventSpy).not.to.be.called;
142-
});
143-
144129
it('should modify value only through calendar selection and not input', async () => {
145130
const eventSpy = spy(picker, 'emitEvent');
146131
// current implementation of DRP single input is not editable;
@@ -579,13 +564,17 @@ describe('Date range picker - single input', () => {
579564
expect(picker.value).to.deep.equal(null);
580565
expect(input.value).to.equal('');
581566
});
567+
});
582568

583-
it('should not clear the input(s) via the clear icon when readOnly is true', async () => {
584-
const eventSpy = spy(picker, 'emitEvent');
585-
const testValue = { start: today.native, end: tomorrow.native };
586-
picker.value = testValue;
569+
describe('Readonly state', () => {
570+
const testValue = { start: today.native, end: tomorrow.native };
571+
beforeEach(async () => {
587572
picker.readOnly = true;
573+
picker.value = testValue;
588574
await elementUpdated(picker);
575+
});
576+
it('should not clear the input(s) via the clear icon when readOnly is true', async () => {
577+
const eventSpy = spy(picker, 'emitEvent');
589578

590579
simulateClick(getIcon(picker, clearIcon));
591580
await elementUpdated(picker);
@@ -594,6 +583,33 @@ describe('Date range picker - single input', () => {
594583
expect(eventSpy).not.called;
595584
checkSelectedRange(picker, testValue, false);
596585
});
586+
it('should not open the calendar on clicking the input - dropdown mode', async () => {
587+
const eventSpy = spy(picker, 'emitEvent');
588+
const igcInput = picker.renderRoot.querySelector(
589+
IgcInputComponent.tagName
590+
)!;
591+
const nativeInput = igcInput.renderRoot.querySelector('input')!;
592+
simulateClick(nativeInput);
593+
await elementUpdated(picker);
594+
595+
expect(picker.open).to.be.false;
596+
expect(eventSpy).not.called;
597+
});
598+
it('should not open the calendar on clicking the input - dialog mode', async () => {
599+
const eventSpy = spy(picker, 'emitEvent');
600+
picker.mode = 'dialog';
601+
await elementUpdated(picker);
602+
const igcInput = picker.renderRoot.querySelector(
603+
IgcInputComponent.tagName
604+
)!;
605+
const nativeInput = igcInput.renderRoot.querySelector('input')!;
606+
607+
simulateClick(nativeInput);
608+
await elementUpdated(picker);
609+
610+
expect(picker.open).to.be.false;
611+
expect(eventSpy).not.called;
612+
});
597613
});
598614
});
599615
describe('Slots', () => {

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

Lines changed: 63 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -147,31 +147,6 @@ describe('Date range picker - two inputs', () => {
147147
checkSelectedRange(picker, expectedValue);
148148
});
149149

150-
it('should not modify value through selection or typing when readOnly is true', async () => {
151-
const eventSpy = spy(picker, 'emitEvent');
152-
picker.readOnly = true;
153-
await elementUpdated(picker);
154-
expect(picker.value).to.deep.equal({ start: null, end: null });
155-
156-
await picker.show();
157-
await selectDates(today, tomorrow, calendar);
158-
159-
expect(picker.value).to.deep.equal({ start: null, end: null });
160-
expect(calendar.values).to.deep.equal([]);
161-
expect(eventSpy).not.to.be.called;
162-
163-
await picker.hide();
164-
165-
dateTimeInputs[0].focus();
166-
simulateKeyboard(dateTimeInputs[0], 'ArrowDown');
167-
await elementUpdated(picker);
168-
expect(isFocused(dateTimeInputs[0])).to.be.true;
169-
expect(dateTimeInputs[0].value).to.equal(null);
170-
expect(picker.value).to.deep.equal({ start: null, end: null });
171-
expect(calendar.values).to.deep.equal([]);
172-
expect(eventSpy).not.to.be.called;
173-
});
174-
175150
it('should modify value only through calendar selection and not input when nonEditable is true', async () => {
176151
const eventSpy = spy(picker, 'emitEvent');
177152
picker.nonEditable = true;
@@ -601,20 +576,6 @@ describe('Date range picker - two inputs', () => {
601576
expect(dateTimeInputs[1].value).to.be.null;
602577
});
603578

604-
it('should not clear the inputs via the clear icon when readOnly is true', async () => {
605-
const eventSpy = spy(picker, 'emitEvent');
606-
const testValue = { start: today.native, end: tomorrow.native };
607-
picker.value = testValue;
608-
picker.readOnly = true;
609-
await elementUpdated(picker);
610-
611-
simulateClick(getIcon(picker, clearIcon));
612-
613-
expect(picker.value).to.deep.equal(testValue);
614-
expect(eventSpy).not.called;
615-
checkSelectedRange(picker, testValue);
616-
});
617-
618579
it('should emit igcInput and igcChange on input value change', async () => {
619580
const eventSpy = spy(picker, 'emitEvent');
620581

@@ -815,6 +776,69 @@ describe('Date range picker - two inputs', () => {
815776
checkDatesEqual(calendar.activeDate, june3rd2025);
816777
});
817778
});
779+
describe('Readonly state', () => {
780+
beforeEach(async () => {
781+
picker.readOnly = true;
782+
await elementUpdated(picker);
783+
});
784+
it('should not modify value through selection or typing when readOnly is true', async () => {
785+
const eventSpy = spy(picker, 'emitEvent');
786+
expect(picker.value).to.deep.equal({ start: null, end: null });
787+
788+
await picker.show();
789+
await selectDates(today, tomorrow, calendar);
790+
791+
expect(picker.value).to.deep.equal({ start: null, end: null });
792+
expect(calendar.values).to.deep.equal([]);
793+
expect(eventSpy).not.to.be.called;
794+
795+
await picker.hide();
796+
797+
dateTimeInputs[0].focus();
798+
simulateKeyboard(dateTimeInputs[0], 'ArrowDown');
799+
await elementUpdated(picker);
800+
expect(isFocused(dateTimeInputs[0])).to.be.true;
801+
expect(dateTimeInputs[0].value).to.equal(null);
802+
expect(picker.value).to.deep.equal({ start: null, end: null });
803+
expect(calendar.values).to.deep.equal([]);
804+
expect(eventSpy).not.to.be.called;
805+
});
806+
it('should not clear the inputs via the clear icon when readOnly is true', async () => {
807+
const eventSpy = spy(picker, 'emitEvent');
808+
const testValue = { start: today.native, end: tomorrow.native };
809+
picker.value = testValue;
810+
await elementUpdated(picker);
811+
812+
simulateClick(getIcon(picker, clearIcon));
813+
814+
expect(picker.value).to.deep.equal(testValue);
815+
expect(eventSpy).not.called;
816+
checkSelectedRange(picker, testValue);
817+
});
818+
it('should not open the calendar on clicking the input - dropdown mode', async () => {
819+
const eventSpy = spy(picker, 'emitEvent');
820+
const nativeInput =
821+
dateTimeInputs[0].renderRoot.querySelector('input')!;
822+
simulateClick(nativeInput);
823+
await elementUpdated(picker);
824+
825+
expect(picker.open).to.be.false;
826+
expect(eventSpy).not.called;
827+
});
828+
it('should not open the calendar on clicking the input - dialog mode', async () => {
829+
const eventSpy = spy(picker, 'emitEvent');
830+
picker.mode = 'dialog';
831+
await elementUpdated(picker);
832+
833+
const nativeInput =
834+
dateTimeInputs[0].renderRoot.querySelector('input')!;
835+
simulateClick(nativeInput);
836+
await elementUpdated(picker);
837+
838+
expect(picker.open).to.be.false;
839+
expect(eventSpy).not.called;
840+
});
841+
});
818842
});
819843
describe('Slots', () => {
820844
it('should render slotted elements', async () => {

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -588,6 +588,22 @@ describe('Date range picker - common tests for single and two inputs mode', () =
588588
});
589589
});
590590
describe('Readonly state', () => {
591+
it('should not modify value through selection when readOnly is true', async () => {
592+
const eventSpy = spy(picker, 'emitEvent');
593+
picker.readOnly = true;
594+
await elementUpdated(picker);
595+
expect(picker.value).to.deep.equal({ start: null, end: null });
596+
597+
await picker.show();
598+
599+
calendar = picker.renderRoot.querySelector(
600+
IgcCalendarComponent.tagName
601+
)!;
602+
await selectDates(today, tomorrow, calendar);
603+
expect(picker.value).to.deep.equal({ start: null, end: null });
604+
expect(calendar.values).to.deep.equal([]);
605+
expect(eventSpy).not.to.be.called;
606+
});
591607
describe('Dropdown mode', () => {
592608
beforeEach(async () => {
593609
picker.readOnly = true;

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1101,7 +1101,9 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
11011101
?invalid=${live(this.invalid)}
11021102
@igcChange=${this._handleInputChangeEvent}
11031103
@igcInput=${this._handleInputEvent}
1104-
@click=${this._isDropDown ? nothing : this._handleInputClick}
1104+
@click=${this._isDropDown || this.readOnly
1105+
? nothing
1106+
: this._handleInputClick}
11051107
exportparts="input, label, prefix, suffix"
11061108
>
11071109
${this._renderCalendarIcon(picker)}
@@ -1141,7 +1143,9 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
11411143
.outlined=${this.outlined}
11421144
?invalid=${live(this.invalid)}
11431145
.disabled=${this.disabled}
1144-
@click=${this._isDropDown ? nothing : this._handleInputClick}
1146+
@click=${this._isDropDown || this.readOnly
1147+
? nothing
1148+
: this._handleInputClick}
11451149
exportparts="input, label, prefix, suffix"
11461150
>
11471151
${this._renderCalendarIcon()}

0 commit comments

Comments
 (0)