v18.4.34 is released

Author: pipeline

controls/base/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## [Unreleased]
 
-## 18.4.33 (2021-01-05)
+## 18.4.31 (2020-12-22)
 
 ### Common
 

controls/base/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-base",
-	"version": "18.4.30",
+	"version": "18.4.31",
 	"description": "A common package of Essential JS 2 base libraries, methods and class definitions",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

controls/buttons/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## [Unreleased]
 
-## 18.4.33 (2021-01-05)
+## 18.4.34 (2021-01-12)
 
 ### CheckBox
 

controls/calendars/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## [Unreleased]
 
+## 18.4.34 (2021-01-12)
+
+### DateTimePicker
+
+#### Bug Fixes
+
+- `#309143` - Issue with "timepicker popup is not opened when render component with `openOnFocus` as true and click on the time icon" has been resolved.
+
 ## 18.3.52 (2020-12-01)
 
 ### Calendar

controls/calendars/blazor/sf-datepicker.ts

@@ -1,5 +1,5 @@
 import { BlazorDotnetObject, Browser, Animation, closest, EventHandler, isNullOrUndefined, } from '@syncfusion/ej2-base';
-import { select, createElement, extend, KeyboardEvents, KeyboardEventArgs, removeClass, formatUnit } from '@syncfusion/ej2-base';
+import { select, createElement, extend, KeyboardEvents, KeyboardEventArgs, removeClass, remove, formatUnit } from '@syncfusion/ej2-base';
 import { Popup } from '@syncfusion/ej2-popups';
 const ROOT: string = 'e-datepicker';
 const POPUPDIMENSION: string = '240px';
@@ -117,6 +117,10 @@ class SfDatePicker {
     public renderPopup(popupElement: HTMLElement, popupHolderEle: HTMLElement, openEventArgs: PopupObjectArgs, options: IDatePickerOptions): void {
         this.options = options;
         this.popupHolder = popupHolderEle;
+        let oldPopupEle: HTMLElement = document.body.querySelector('.e-datepicker.e-popup-open');
+        if (oldPopupEle) {
+            remove(oldPopupEle);
+        }
         this.createCalendar(popupElement, options);
         if (Browser.isDevice && options.isDatePopup) {
             this.mobilePopupContainer = createElement('div', { className: 'e-datepick-mob-popup-wrap' });

controls/calendars/blazor/sf-daterangepicker.ts

@@ -142,6 +142,10 @@ class SfDateRangePicker {
     public renderPopup(popupElement: HTMLElement, popupHolderEle: HTMLElement, openEventArgs: PopupObjectArgs, options: IDateRangePickerOptions): void {
         this.options = options;
         this.popupHolder = popupHolderEle;
+        let oldPopupEle: HTMLElement = document.body.querySelector('.e-daterangepicker.e-popup-open');
+        if (oldPopupEle) {
+            remove(oldPopupEle);
+        }
         this.createCalendar(popupElement, options);
         if (Browser.isDevice) {
             this.mobilePopupContainer = this.popupHolder.querySelector('.e-daterangepick-mob-popup-wrap');

controls/calendars/blazor/sf-timepicker.ts

@@ -74,7 +74,6 @@ class SfTimePicker {
         this.timeCollections = [];
         this.listWrapper = popupHolderEle.querySelector('.' + POPUP_CONTENT) as HTMLElement || select('.' + POPUP_CONTENT) as HTMLElement;
         this.getTimeCollection();
-        this.wireListEvents();
         if (!isNullOrUndefined((this.element as HTMLInputElement).value)) {
             this.removeSelection();
             this.selectedElement = this.listWrapper.querySelector(
@@ -115,17 +114,6 @@ class SfTimePicker {
             selectElement.setAttribute(ARIA_SELECT, 'true');
         }
     }
-    public updateListStatus(index: number, status: string): void {
-        if (!isNullOrUndefined(this.listWrapper) && !isNullOrUndefined(index)) {
-            this.selectedElement = this.listWrapper.querySelectorAll('.' + LISTCLASS)[index] as HTMLElement;
-            if (status === SELECT) {
-                this.removeSelection();
-                this.updateSelection(this.selectedElement);
-            }
-            this.setHover(this.selectedElement, NAVIGATION);
-            this.setScrollPosition();
-        }
-    }
     private setScrollPosition(): void {
         if (!isNullOrUndefined(this.selectedElement)) {
             this.findScrollTop(this.selectedElement);
@@ -205,7 +193,6 @@ class SfTimePicker {
             open: () => {
                 this.popupWrapper.style.visibility = 'visible';
             }, close: () => {
-                this.unWireListEvents();
                 this.popupHolder.appendChild(this.popupWrapper);
                 if (this.popupObj) {
                     this.popupObj.destroy();
@@ -226,38 +213,6 @@ class SfTimePicker {
         removeClass([document.body], OVERFLOW);
         this.closeEventCallback(closeEventArgs);
     }
-    private wireListEvents(): void {
-        EventHandler.add(this.listWrapper, 'click', this.onMouseClick, this);
-        if (!Browser.isDevice) {
-            EventHandler.add(this.listWrapper, 'mouseover', this.onMouseOver, this);
-            EventHandler.add(this.listWrapper, 'mouseout', this.onMouseLeave, this);
-        }
-    }
-    private onMouseClick(event: MouseEvent): void {
-        let target: Element = <Element>event.target;
-        let li: HTMLElement = this.selectedElement = <HTMLElement>closest(target, '.' + LISTCLASS);
-        let dataVal: string = li.getAttribute('data-value');
-        if (this.isValidLI(li) && !li.classList.contains(SELECTED)) {
-            this.removeSelection();
-            this.updateSelection(this.selectedElement);
-            this.dotNetRef.invokeMethodAsync(LIST_CLICK, dataVal, event);
-        } else {
-            this.dotNetRef.invokeMethodAsync(HIDE_POPUP, event);
-        }
-    }
-    private onMouseOver(event: MouseEvent): void {
-        let currentLi: HTMLElement = <HTMLElement>closest(<Element>event.target, '.' + LISTCLASS);
-        this.setHover(currentLi, HOVER);
-    }
-    private setHover(li: HTMLElement, className: string): void {
-        if (this.isValidLI(li) && !li.classList.contains(className)) {
-            this.removeHover(className);
-            addClass([li], className);
-            if (className === NAVIGATION) {
-                li.setAttribute(ARIA_SELECT, 'true');
-            }
-        }
-    }
     private removeSelection(): void {
         this.removeHover(HOVER);
         if (!isNullOrUndefined(this.popupWrapper)) {
@@ -278,21 +233,6 @@ class SfTimePicker {
             }
         }
     }
-    private isValidLI(li: Element | HTMLElement): boolean {
-        return (li && li.classList.contains(LISTCLASS) && !li.classList.contains(DISABLED));
-    }
-    private onMouseLeave(): void {
-        this.removeHover(HOVER);
-    }
-    private unWireListEvents(): void {
-        if (this.listWrapper) {
-            EventHandler.remove(this.listWrapper, 'click', this.onMouseClick);
-            if (!Browser.isDevice) {
-                EventHandler.remove(this.listWrapper, 'mouseover', this.onMouseOver);
-                EventHandler.remove(this.listWrapper, 'mouseout', this.onMouseLeave);
-            }
-        }
-    }
     private setWidth(width: number | string): string {
         if (typeof width === 'number') {
             width = formatUnit(width);
@@ -359,9 +299,13 @@ class SfTimePicker {
             popupWrapper.style.zIndex = index.toString();
         }
     }
-    public selectInputText(element: BlazorTimePickerElement | HTMLInputElement): void {
+    public selectInputText(element: BlazorTimePickerElement | HTMLInputElement, isNavigation: boolean, index: number): void {
         if (!Browser.isDevice) {
             (element as HTMLInputElement).setSelectionRange(0, (element as HTMLInputElement).value.length);
+            if (isNavigation && this.listWrapper) {
+                this.selectedElement = this.listWrapper.querySelectorAll('.' + LISTCLASS)[index] as HTMLElement;
+                this.setScrollPosition();
+            }
         }
     }
     public isDevice(): Boolean {
@@ -406,14 +350,9 @@ let TimePicker: object = {
             element.blazor__instance.closePopup(closeEventArgs, options);
         }
     },
-    selectInputText(element: BlazorTimePickerElement): void {
-        if (element && element.blazor__instance) {
-            element.blazor__instance.selectInputText(element);
-        }
-    },
-    updateListStatus(element: BlazorTimePickerElement, index: number, status: string): void {
+    selectInputText(element: BlazorTimePickerElement, isNavigation: boolean, index: number): void {
         if (element && element.blazor__instance) {
-            element.blazor__instance.updateListStatus(index, status);
+            element.blazor__instance.selectInputText(element, isNavigation, index);
         }
     },
     focusIn(inputEle: HTMLInputElement): void {

controls/calendars/dist/ej2-calendars.umd.min.js

@@ -2957,6 +2957,7 @@ let DatePicker = class DatePicker extends Calendar {
         this.checkPreviousValue = null;
         this.isAngular = false;
         this.preventChange = false;
+        this.isIconClicked = false;
         this.datepickerOptions = options;
     }
     /**
@@ -3371,6 +3372,7 @@ let DatePicker = class DatePicker extends Calendar {
         Input.setValue(value, this.inputElement, this.floatLabelType, this.showClearButton);
     }
     dateIconHandler(e) {
+        this.isIconClicked = true;
         if (Browser.isDevice) {
             this.inputElement.setAttribute('readonly', '');
             this.inputElement.blur();
@@ -3395,6 +3397,7 @@ let DatePicker = class DatePicker extends Calendar {
                 }
             }
         }
+        this.isIconClicked = false;
     }
     updateHtmlAttributeToWrapper() {
         if (!isNullOrUndefined(this.htmlAttributes)) {
@@ -3485,7 +3488,7 @@ let DatePicker = class DatePicker extends Calendar {
         this.isDateIconClicked = false;
         this.trigger('focus', focusArguments);
         this.updateIconState();
-        if (this.openOnFocus) {
+        if (this.openOnFocus && !this.isIconClicked) {
             this.show();
         }
     }
@@ -11866,6 +11869,7 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
         }
     }
     timeHandler(e) {
+        this.isIconClicked = true;
         if (Browser.isDevice) {
             this.inputElement.setAttribute('readonly', '');
         }
@@ -11885,6 +11889,7 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
                 addClass([this.inputWrapper.container], [INPUTFOCUS$2]);
             }
         }
+        this.isIconClicked = false;
     }
     dateHandler(e) {
         if (e.currentTarget === this.inputWrapper.buttons[0]) {
@@ -12039,9 +12044,6 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
                     && target === this.popupObject.element);
             }
         }
-        if (this.openOnFocus) {
-            this.show();
-        }
     }
     isTimePopupOpen() {
         return (this.dateTimeWrapper && this.dateTimeWrapper.classList.contains('' + ROOT$4)) ? true : false;