v20.1.57 is released

Author: pipeline

controls/base/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## [Unreleased]
 
+## 20.1.56 (2022-05-17)
+
+### Common
+
+#### Bug Fixes
+
+- `F173666` - The issue with sanitize html while creating a appointment in scheduler has been resolve.
+
 ## 20.1.55 (2022-05-12)
 
 ### Common

controls/base/package.json

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

controls/base/src/sanitize-helper.ts

@@ -169,7 +169,7 @@ export class SanitizeHtmlHelper {
         this.removeXssAttrs();
         const tempEleValue: string = this.wrapElement.innerHTML;
         this.removeElement();
-        return tempEleValue;
+        return tempEleValue.replace('&', '&');
     }
 
     private static removeElement(): void {

controls/base/themestudio/styles/inplace-editor/inplace-editor/_theme.scss

@@ -136,6 +136,14 @@
             border: 1px solid darken($gray-600, 10%);
           }
         }
+        @else if $inplace-skin == 'bootstrap5' {
+
+          &:hover {
+            background-color: darken($gray-600, 7.5%);
+            border: 1px solid darken($gray-600, 10%);
+          }
+        }
+
 
         @if $inplace-skin == 'bootstrap4' {
 

controls/calendars/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## [Unreleased]
 
+## 20.1.57 (2022-05-24)
+
+### DateRangePicker
+
+#### Bug Fixes
+
+- `#I378357` - Issue with "tab key navigation is not working between calendars" has been resolved.
+
 ## 19.3.46 (2021-10-19)
 
 ### TimePicker

controls/calendars/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-calendars",
-	"version": "20.1.52",
+	"version": "20.1.57",
 	"description": "A complete package of date or time components with built-in features such as date formatting, inline editing, multiple (range) selection, range restriction, month and year selection, strict mode, and globalization.",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

controls/calendars/spec/daterangepicker/daterangepicker.spec.ts

@@ -4140,5 +4140,145 @@ describe('EJ2-56658:change event is not triggered while remove the selected time
     });
 
 });
+describe('EJ2-59142', () => {
+    let datetimepicker: any;
+    let keyEventArgs: any = {
+        preventDefault: (): void => { /** NO Code */ },
+        stopPropagation:(): void=>{},
+        action: 'ArrowLeft',
+        code: 'ArrowLeft',
+        key: 'ArrowLeft'
+    };
+    beforeEach(() => {
+        let ele: HTMLElement = createElement('input', { id: 'dateTime' });
+        document.body.appendChild(ele);
+    });
+    afterEach(() => {
+        if (datetimepicker) {
+            datetimepicker.destroy();
+        }
+        document.body.innerHTML = '';
+    });
+    it('Typing a value in the Datetime picker mask is not working properly.', () => {
+        datetimepicker = new DateTimePicker({
+            placeholder: 'Select a date and time',
+            format: 'dd/MM/yyyy',
+            enableMask: true,
+            value: new Date('01/01/2020')
+        });
+        datetimepicker.appendTo('#dateTime');
+        datetimepicker.focusIn();
+        expect(datetimepicker.element.value).toBe('01/01/2020');
+        datetimepicker.element.selectionStart = 0;
+        datetimepicker.element.selectionEnd = 2;
+        datetimepicker.element.value = '0/01/2020';
+        datetimepicker.element.selectionStart = 1;
+        datetimepicker.inputHandler();
+        expect(datetimepicker.element.value).toBe('0/01/2020');
+        expect(datetimepicker.element.selectionStart === 0).toBe(true);
+        expect(datetimepicker.element.selectionEnd === 1).toBe(true);
+        datetimepicker.element.value = '4/01/2020';
+        datetimepicker.element.selectionStart = 1;
+        datetimepicker.inputHandler();
+        expect(datetimepicker.element.value).toBe('04/01/2020');
+        expect(datetimepicker.element.selectionStart === 3).toBe(true);
+        expect(datetimepicker.element.selectionEnd === 5).toBe(true);
+        datetimepicker.element.value = '04/0/2020';
+        datetimepicker.element.selectionStart = 4;
+        datetimepicker.inputHandler();
+        expect(datetimepicker.element.value).toBe('04/0/2020');
+        expect(datetimepicker.element.selectionStart === 3).toBe(true);
+        expect(datetimepicker.element.selectionEnd === 4).toBe(true);
+        datetimepicker.element.value = '04/5/2020';
+        datetimepicker.element.selectionStart = 4;
+        datetimepicker.inputHandler();
+        expect(datetimepicker.element.value).toBe('04/05/2020');
+        expect(datetimepicker.element.selectionStart === 6).toBe(true);
+        expect(datetimepicker.element.selectionEnd === 10).toBe(true);
+        datetimepicker.format = 'MM/dd/yyyy';
+        datetimepicker.dataBind();
+        datetimepicker.element.selectionStart = 0;
+        datetimepicker.element.selectionEnd = 2;
+        datetimepicker.element.value = '1/01/2020';
+        datetimepicker.element.selectionStart = 1;
+        datetimepicker.inputHandler();
+        expect(datetimepicker.element.value).toBe('01/01/2020');
+        expect(datetimepicker.element.selectionStart === 0).toBe(true);
+        expect(datetimepicker.element.selectionEnd === 2).toBe(true);
+        datetimepicker.element.value = '2/01/2020';
+        datetimepicker.element.selectionStart = 1;
+        datetimepicker.inputHandler();
+        expect(datetimepicker.element.value).toBe('12/01/2020');
+        datetimepicker.element.selectionStart = 3;
+        datetimepicker.element.selectionEnd = 5;
+        datetimepicker.element.value = '12/1/2020';
+        datetimepicker.element.selectionStart = 4;
+        datetimepicker.inputHandler();
+        expect(datetimepicker.element.value).toBe('12/01/2020');
+        expect(datetimepicker.element.selectionStart === 3).toBe(true);
+        expect(datetimepicker.element.selectionEnd === 5).toBe(true);
+        datetimepicker.element.value = '12/0/2020';
+        datetimepicker.element.selectionStart = 4;
+        datetimepicker.inputHandler();
+        expect(datetimepicker.element.value).toBe('12/10/2020');
+        expect(datetimepicker.element.selectionStart === 6).toBe(true);
+        expect(datetimepicker.element.selectionEnd === 10).toBe(true);
+        datetimepicker.keydownHandler(keyEventArgs);
+        expect(datetimepicker.element.selectionStart).toBe(3);
+        expect(datetimepicker.element.selectionEnd).toBe(5);
+        datetimepicker.element.value = '12/0/2020';
+        datetimepicker.element.selectionStart = 4;
+        datetimepicker.inputHandler();
+        expect(datetimepicker.element.value).toBe('12/0/2020');
+        expect(datetimepicker.element.selectionStart === 3).toBe(true);
+        expect(datetimepicker.element.selectionEnd === 4).toBe(true);
+        datetimepicker.element.value = '12/6/2020';
+        datetimepicker.element.selectionStart = 4;
+        datetimepicker.inputHandler();
+        expect(datetimepicker.element.value).toBe('12/06/2020');
+        expect(datetimepicker.element.selectionStart === 6).toBe(true);
+        expect(datetimepicker.element.selectionEnd === 10).toBe(true);
+        datetimepicker.format = 'yyyy-MM-dd';
+        datetimepicker.dataBind();
+        expect(datetimepicker.element.value).toBe('2020-01-01');
+        datetimepicker.element.selectionStart = 5;
+        datetimepicker.element.selectionEnd = 7;
+        datetimepicker.element.value = '2020-0-01';
+        datetimepicker.element.selectionStart = 6;
+        datetimepicker.inputHandler();
+        expect(datetimepicker.element.value).toBe('2020-0-01');
+        expect(datetimepicker.element.selectionStart === 5).toBe(true);
+        expect(datetimepicker.element.selectionEnd === 6).toBe(true);
+        datetimepicker.element.value = '2020-9-01';
+        datetimepicker.element.selectionStart = 6;
+        datetimepicker.inputHandler();
+        expect(datetimepicker.element.value).toBe('2020-09-01');
+        expect(datetimepicker.element.selectionStart === 8).toBe(true);
+        expect(datetimepicker.element.selectionEnd === 10).toBe(true);
+        datetimepicker.element.value = '2020-09-1';
+        datetimepicker.inputHandler();
+        expect(datetimepicker.element.value).toBe('2020-09-01');
+        expect(datetimepicker.element.selectionStart === 8).toBe(true);
+        expect(datetimepicker.element.selectionEnd === 10).toBe(true);
+        datetimepicker.element.value = '2020-09-0';
+        datetimepicker.inputHandler();
+        expect(datetimepicker.element.value).toBe('2020-09-10');
+        datetimepicker.keydownHandler(keyEventArgs);
+        expect(datetimepicker.element.selectionStart === 5).toBe(true);
+        expect(datetimepicker.element.selectionEnd === 7).toBe(true);
+        datetimepicker.element.value = '2020-1-10';
+        datetimepicker.element.selectionStart = 6;
+        datetimepicker.inputHandler();
+        expect(datetimepicker.element.value).toBe('2020-01-10');
+        expect(datetimepicker.element.selectionStart === 5).toBe(true);
+        expect(datetimepicker.element.selectionEnd === 7).toBe(true);
+        datetimepicker.element.value = '2020-2-10';
+        datetimepicker.element.selectionStart = 6;
+        datetimepicker.inputHandler();
+        expect(datetimepicker.element.value).toBe('2020-12-10');
+        expect(datetimepicker.element.selectionStart === 8).toBe(true);
+        expect(datetimepicker.element.selectionEnd === 10).toBe(true);
+    });
+});
 });
 

controls/calendars/spec/datetimepicker/datetimepicker.spec.ts

@@ -568,6 +568,10 @@ export class CalendarBase extends Component<HTMLElement> implements INotifyPrope
             duration: 400,
             isCenterRipple: true
         });
+        if (this.getModuleName() === 'daterangepicker') {
+            attributes(this.previousIcon, {tabIndex: '-1'});
+            attributes(this.nextIcon, {tabIndex: '-1'});
+        }
         attributes(this.nextIcon, <{ [key: string]: string }>ariaNextAttrs);
         this.headerTitleElement = this.createElement('div', { className: '' + LINK + ' ' + TITLE });
         attributes(this.headerTitleElement, <{ [key: string]: string }>ariaTitleAttrs);
@@ -685,7 +689,7 @@ export class CalendarBase extends Component<HTMLElement> implements INotifyPrope
             this.todayElement = this.createElement('button', { attrs: { role: 'button' } });
             rippleEffect(this.todayElement);
             this.updateFooter();
-            addClass([this.todayElement], [BTN, TODAY, FLAT, PRIMARY, CSS]);            
+            addClass([this.todayElement], [BTN, TODAY, FLAT, PRIMARY, CSS]);
             if ((!(+new Date(minimum.setHours(0, 0, 0, 0)) <= +this.todayDate &&
                 +this.todayDate <= +new Date(maximum.setHours(0, 0, 0, 0)))) || (this.todayDisabled)) {
                 addClass([this.todayElement], DISABLED);

controls/calendars/src/calendar/calendar.ts

@@ -90,6 +90,7 @@ export class DatePicker extends Calendar implements IInput {
     protected isIconClicked : boolean = false;
     protected isDynamicValueChanged: boolean = false;
     protected moduleName: string = this.getModuleName();
+    protected isFocused: boolean = false;
     /**
      * Specifies the width of the DatePicker component.
      *
@@ -1004,6 +1005,7 @@ export class DatePicker extends Calendar implements IInput {
         }
     }
     private inputFocusHandler(): void {
+        this.isFocused = true;
         if (!this.enabled) {
             return;
         }

controls/calendars/src/datepicker/datepicker.ts

@@ -901,7 +901,7 @@ export class DateRangePicker extends CalendarBase {
             this.validationAttribute(this.element, this.inputElement);
         }
         this.checkHtmlAttributes(false);
-        merge(this.defaultKeyConfigs, { shiftTab: 'shift+tab' });
+        merge(this.defaultKeyConfigs, { shiftTab: 'shift+tab' , tab: 'tab' });
         const start: Date = this.checkDateValue(new Date(this.checkValue(this.startValue)));
         this.setProperties({ startDate: start }, true); // persist the value propeerty.
         this.setProperties({ endValue: this.checkDateValue(new Date(this.checkValue(this.endValue))) }, true);
@@ -1604,8 +1604,10 @@ export class DateRangePicker extends CalendarBase {
             }
         }
     }
-    private keyCalendarUpdate(isLeftCalendar: boolean, ele: HTMLElement): HTMLElement {
-        this.removeFocusedDate();
+    private keyCalendarUpdate(isLeftCalendar: boolean, ele: HTMLElement, isRemoveFocus: boolean = true): HTMLElement {
+        if (isRemoveFocus) {
+            this.removeFocusedDate();
+        }
         if (isLeftCalendar) {
             this.leftCalCurrentDate = new Date(+this.currentDate);
             ele = this.leftCalendar;
@@ -1698,8 +1700,37 @@ export class DateRangePicker extends CalendarBase {
             }
             this.keyNavigation(ele, e);
             break;
+        case 'tab':
+            if (this.tabKeyValidation(ele, LEFTCALENDER)) {
+                ele = this.keyCalendarUpdate(false, ele, false);
+                const focusedCell: HTMLElement = ele.querySelector('.e-focused-date');
+                if (isNullOrUndefined(focusedCell)) {
+                    this.currentDate = this.firstCellToFocus(this.rightCalendar);
+                }
+                this.keyboardNavigate(0, view, e, max, min);
+                this.keyNavigation(ele, e);
+            }
+            break;
+        case 'shiftTab':
+            if (this.tabKeyValidation(ele, RIGHTCALENDER)) {
+                ele = this.keyCalendarUpdate(true, ele, false);
+                const focusedCell: HTMLElement = ele.querySelector('.e-focused-date');
+                if (isNullOrUndefined(focusedCell)) {
+                    this.currentDate = this.firstCellToFocus(this.leftCalendar);
+                }
+                this.keyboardNavigate(0, view, e, max, min);
+                this.keyNavigation(ele, e);
+            }
+            break;
         }
     }
+    private firstCellToFocus(calendar: HTMLElement): Date {
+        const focusAbleEle: HTMLElement = calendar.children[1].firstElementChild.querySelector('td.e-cell:not(.e-week-number):not(.e-disabled):not(.e-other-month)');
+        const focusEleID: string = focusAbleEle && focusAbleEle.id ? focusAbleEle.id.split('_')[0] : null;
+        const currentFirstDay: Date = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), 1);
+        const focusDate: Date = focusEleID ? new Date(+focusEleID) : currentFirstDay;
+        return focusDate;
+    }
     private keyInputHandler(e: KeyboardEventArgs, value?: Date): void {
         let date: Date;
         let view: number = this.getViewNumber(this.currentView());
@@ -1876,19 +1907,39 @@ export class DateRangePicker extends CalendarBase {
                 this.presetElement.focus();
                 this.removeFocusedDate();
             }
-            e.preventDefault();
+            if (isLeftCalendar) {
+                e.preventDefault();
+            }
+            if (this.tabKeyValidation(ele, RIGHTCALENDER)) {
+                this.currentDate = new Date(+this.leftCalCurrentDate);
+                this.navInCalendar(e, isLeftCalendar, leftDateLimit, rightDateLimit, ele);
+            }
             break;
         case 'spacebar':
             if (this.applyButton && !this.applyButton.disabled) {
                 this.applyFunction(e);
             }
             break;
+        case 'tab':
+            if (this.tabKeyValidation(ele, LEFTCALENDER)) {
+                this.currentDate = new Date(+this.rightCalCurrentDate);
+                this.navInCalendar(e, isLeftCalendar, leftDateLimit, rightDateLimit, ele);
+            }
+            break;
         default:
             this.navInCalendar(e, isLeftCalendar, leftDateLimit, rightDateLimit, ele);
             this.checkMinMaxDays();
         }
         this.presetHeight();
     }
+    private tabKeyValidation(ele: HTMLElement, calendarPos: string): boolean {
+        const isLeftCalendar: boolean = ele.classList.contains(calendarPos);
+        const rightHeader: HTMLElement = this.rightCalendar.querySelector('.e-header');
+        const leftHeader: HTMLElement = this.leftCalendar.querySelector('.e-header');
+        const isRightMonth: boolean = rightHeader ? rightHeader.classList.contains('e-month') : false;
+        const isLeftMonth: boolean = leftHeader ? leftHeader.classList.contains('e-month') : false;
+        return isLeftCalendar && isLeftMonth && isRightMonth && !this.isMobile;
+    }
     private keyNavigation(calendar: HTMLElement, e: KeyboardEventArgs): void {
         this.bindCalendarCellEvents(calendar);
         if (calendar.classList.contains(LEFTCALENDER)) {
@@ -2595,9 +2646,9 @@ export class DateRangePicker extends CalendarBase {
         }
         this.removeFocusedDate();
     }
-    private updateControl(calendar: HTMLElement): void {
+    private updateControl(calendar: HTMLElement, customDate: Date = null): void {
         if (calendar.classList.contains(RIGHTCALENDER)) {
-            this.rightCalCurrentDate = new Date(+this.currentDate);
+            this.rightCalCurrentDate = new Date(+(customDate ? customDate : this.currentDate));
         } else {
             this.leftCalCurrentDate = new Date(+this.currentDate);
         }
@@ -2918,7 +2969,7 @@ export class DateRangePicker extends CalendarBase {
             this.rightCalNextIcon = <HTMLElement>this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + NEXTICON);
             this.rightTitle = <HTMLElement>this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + TITLE);
             remove(this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + ICONCONTAINER));
-            this.calendarElement.querySelector('table').setAttribute('tabindex', '-1');
+            this.calendarElement.querySelector('table').setAttribute('tabindex', '0');
             this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + HEADER).appendChild(this.rightCalNextIcon);
             this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + HEADER).appendChild(this.rightCalPrevIcon);
             prepend([this.rightCalPrevIcon], this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + HEADER));
@@ -3027,7 +3078,8 @@ export class DateRangePicker extends CalendarBase {
                         this.updateControl(this.leftCalendar);
                         this.updateCalendarElement(this.rightCalendar);
                         super.navigateTo.call(this, view, this.rightCalCurrentDate);
-                        this.updateControl(this.rightCalendar);
+                        const customDate: Date = this.rightCalCurrentDate ? this.rightCalCurrentDate : this.currentDate;
+                        this.updateControl(this.rightCalendar, customDate);
                         this.updateNavIcons();
                         this.calendarIconEvent();
                         this.calendarIconRipple();

controls/calendars/src/daterangepicker/daterangepicker.ts

@@ -22,4 +22,5 @@ export interface IMaskedDateTime extends Component<HTMLElement> {
     cldrTimeFormat(): string
     calendarMode: CalendarType;
     globalize: Internationalization;
+    isFocused: boolean;
 }