@@ -9295,6 +9295,95 @@ describe('DateRangePicker', () => {
92959295 expect(daterangePicker.inputElement.value === "1/1/2020 - 2/2/2020").toBe(true)
92969296 });
92979297 });
9298+ describe('EJ2-47722 - If openOnFocus property is enabled then DateRangePicker popup does not closed properly',function(){
9299+ let dateRangePicker:any;
9300+ beforeEach(function(){
9301+ let element: HTMLElement = createElement('input',{id:'date'});
9302+ document.body.appendChild(element);
9303+ dateRangePicker = new DateRangePicker({
9304+ openOnFocus : true,
9305+ presets: [{
9306+ label: 'Today', start: new Date(), end: new Date() },
9307+ { label: 'Last week', start: new Date(new Date().setDate(new Date().getDate() - 7)), end: new Date()
9308+ }],
9309+ });
9310+ dateRangePicker.appendTo('#date');
9311+ });
9312+ afterEach(function(){
9313+ if(dateRangePicker){
9314+ dateRangePicker.destroy();
9315+ }
9316+ document.body.innerHTML = '';
9317+ });
9318+ it('check the popup open by focus the control',function(){
9319+ dateRangePicker.inputFocusHandler();
9320+ expect(dateRangePicker.popupObj.element.querySelector('.e-date-range-container')).not.toBe(null);
9321+ expect(dateRangePicker.popupObj.element.querySelector('.e-presets')).not.toBe(null);
9322+ <HTMLElement>(dateRangePicker.popupObj.element.querySelector('.e-presets li:first-child')).click();
9323+ expect(document.body.contains(dateRangePicker.popupObj)).toBe(false);
9324+ dateRangePicker.preventFocus = false;
9325+ dateRangePicker.inputFocusHandler();
9326+ expect(dateRangePicker.popupObj.element.querySelector('.e-date-range-container')).toBe(null);
9327+ expect(dateRangePicker.popupObj.element.querySelector('.e-presets')).not.toBe(null);
9328+ expect(dateRangePicker.popupObj.element.querySelector('.e-presets li:first-child').classList.contains('e-active')).toBe(true);
9329+ dateRangePicker.popupObj.element.querySelector('.e-presets li:first-child').nextElementSibling.click();
9330+ expect(document.body.contains(dateRangePicker.popupObj)).toBe(false);
9331+ dateRangePicker.preventFocus = false;
9332+ dateRangePicker.inputFocusHandler();
9333+ expect(dateRangePicker.popupObj.element.querySelector('.e-date-range-container')).toBe(null);
9334+ expect(dateRangePicker.popupObj.element.querySelector('.e-presets')).not.toBe(null);
9335+ expect(dateRangePicker.popupObj.element.querySelector('.e-presets li:first-child').nextElementSibling.classList.contains('e-active')).toBe(true);
9336+ <HTMLElement>(dateRangePicker.popupObj.element.querySelector('.e-presets li:first-child')).click();
9337+ expect(document.body.contains(dateRangePicker.popupObj)).toBe(false);
9338+ dateRangePicker.preventFocus = false;
9339+ dateRangePicker.inputFocusHandler();
9340+ <HTMLElement>(dateRangePicker.popupObj.element.querySelector('.e-presets li:last-child')).click();
9341+ expect(dateRangePicker.popupObj.element.querySelector('.e-date-range-container')).not.toBe(null);
9342+ expect(dateRangePicker.popupObj.element.querySelector('.e-presets')).not.toBe(null);
9343+ document.getElementsByClassName('e-day')[15].dispatchEvent(clickEvent);
9344+ document.getElementsByClassName('e-day')[16].dispatchEvent(clickEvent);
9345+ dateRangePicker.applyButton.element.click();
9346+ dateRangePicker.preventFocus = false;
9347+ dateRangePicker.inputFocusHandler();
9348+ expect(dateRangePicker.popupObj.element.querySelector('.e-date-range-container')).not.toBe(null);
9349+ expect(dateRangePicker.popupObj.element.querySelector('.e-presets')).not.toBe(null);
9350+ <HTMLElement>(dateRangePicker.popupObj.element.querySelector('.e-presets li:first-child')).click();
9351+ expect(document.body.contains(dateRangePicker.popupObj)).toBe(false);
9352+ });
9353+ it('check the popup open by focus the control as well as by click the date range icon',function(){
9354+ (<HTMLElement>document.getElementsByClassName(' e-input-group-icon e-range-icon e-icons')[0]).dispatchEvent(clickEvent);
9355+ expect(dateRangePicker.popupObj.element.querySelector('.e-date-range-container')).not.toBe(null);
9356+ expect(dateRangePicker.popupObj.element.querySelector('.e-presets')).not.toBe(null);
9357+ <HTMLElement>(dateRangePicker.popupObj.element.querySelector('.e-presets li:first-child')).click();
9358+ expect(document.body.contains(dateRangePicker.popupObj)).toBe(false);
9359+ dateRangePicker.preventFocus = false;
9360+ dateRangePicker.inputFocusHandler();
9361+ expect(dateRangePicker.popupObj.element.querySelector('.e-date-range-container')).toBe(null);
9362+ expect(dateRangePicker.popupObj.element.querySelector('.e-presets')).not.toBe(null);
9363+ expect(dateRangePicker.popupObj.element.querySelector('.e-presets li:first-child').classList.contains('e-active')).toBe(true);
9364+ dateRangePicker.popupObj.element.querySelector('.e-presets li:first-child').nextElementSibling.click();
9365+ expect(document.body.contains(dateRangePicker.popupObj)).toBe(false);
9366+ (<HTMLElement>document.getElementsByClassName(' e-input-group-icon e-range-icon e-icons')[0]).dispatchEvent(clickEvent);
9367+ expect(dateRangePicker.popupObj.element.querySelector('.e-date-range-container')).toBe(null);
9368+ expect(dateRangePicker.popupObj.element.querySelector('.e-presets')).not.toBe(null);
9369+ expect(dateRangePicker.popupObj.element.querySelector('.e-presets li:first-child').nextElementSibling.classList.contains('e-active')).toBe(true);
9370+ <HTMLElement>(dateRangePicker.popupObj.element.querySelector('.e-presets li:first-child')).click();
9371+ expect(document.body.contains(dateRangePicker.popupObj)).toBe(false);
9372+ dateRangePicker.preventFocus = false;
9373+ dateRangePicker.inputFocusHandler();
9374+ <HTMLElement>(dateRangePicker.popupObj.element.querySelector('.e-presets li:last-child')).click();
9375+ expect(dateRangePicker.popupObj.element.querySelector('.e-date-range-container')).not.toBe(null);
9376+ expect(dateRangePicker.popupObj.element.querySelector('.e-presets')).not.toBe(null);
9377+ document.getElementsByClassName('e-day')[15].dispatchEvent(clickEvent);
9378+ document.getElementsByClassName('e-day')[16].dispatchEvent(clickEvent);
9379+ dateRangePicker.applyButton.element.click();
9380+ (<HTMLElement>document.getElementsByClassName(' e-input-group-icon e-range-icon e-icons')[0]).dispatchEvent(clickEvent);
9381+ expect(dateRangePicker.popupObj.element.querySelector('.e-date-range-container')).not.toBe(null);
9382+ expect(dateRangePicker.popupObj.element.querySelector('.e-presets')).not.toBe(null);
9383+ <HTMLElement>(dateRangePicker.popupObj.element.querySelector('.e-presets li:first-child')).click();
9384+ expect(document.body.contains(dateRangePicker.popupObj)).toBe(false);
9385+ });
9386+ });
92989387});
92999388interface CalendarElement {
93009389 leftCalTitle: HTMLElement;
0 commit comments