v27.2.3 is released

Author: pipeline

controls/barcodegenerator/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## [Unreleased]
 
-## 27.2.2 (2024-11-15)
+## 27.2.3 (2024-11-21)
 
 ### Barcode
 

controls/buttons/CHANGELOG.md

@@ -8,6 +8,15 @@
 
 #### Bug Fixes
 
+- `#F857466`- The issue with "Need to set the label tag for attribute if user changes the checkbox input id in checkbox component" has been resolved.
+- `#F95768`- The issue with "Parent element click event `prevented` while clicking on switch component in angular." has been resolved.
+
+## 27.1.58 (2024-11-05)
+
+### Checkbox
+
+#### Bug Fixes
+
 - `#F95768`- The issue with "Checkbox not getting checked while using `usestate` in react" has been resolved.
 
 ## 27.1.53 (2024-10-15)

controls/buttons/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-buttons",
-	"version": "27.1.53",
+	"version": "27.2.2",
 	"description": "A package of feature-rich Essential JS 2 components such as Button, CheckBox, RadioButton and Switch.",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

controls/buttons/spec/switch.spec.ts

@@ -416,6 +416,40 @@ describe('Switch', () => {
         });
     });
 
+    describe('Parent element click event prevented while clicking on switch component', () => {
+        let switchBtn: Switch;
+        let input: HTMLElement;
+        let parentElement: HTMLElement;
+        let parentChecked: boolean = false;
+        beforeEach(() => {
+            parentElement = createElement('div', {
+                id: 'form'
+            }) as HTMLElement;
+            input = createElement('input', { id: 'switch1' }) as HTMLElement;
+            parentElement.appendChild(input);
+            parentElement.onclick = function () {
+                parentChecked = true;
+            }
+            document.body.appendChild(parentElement);
+        });
+        afterEach(() => {
+            parentElement.remove();
+            switchBtn.destroy();
+        })
+        it('ej2-918217: Parent element click event prevented while clicking on switch component in angular platforms.', () => {
+            switchBtn = new Switch({
+                checked: true
+            }, '#switch1');
+            switchBtn.click();
+            expect(parentChecked).toBeTruthy();
+            const event: any = {
+                preventDefault: (): void => { },
+                type: 'mousedown'
+            };
+            (switchBtn as any).mouseLeaveHandler(event);
+        });
+    });
+
     describe('Switch in HTML5 forms', () => {
         let input: HTMLFormElement;
         let input1: HTMLFormElement;

controls/buttons/src/check-box/check-box.ts

@@ -372,7 +372,7 @@ export class CheckBox extends Component<HTMLInputElement> implements INotifyProp
                 this.element.parentNode.insertBefore(wrapper, this.element);
             }
         }
-        const label: Element = this.createElement('label', { attrs: { for: this.element.id } });
+        const label: Element = this.createElement('label', { attrs: { for: this.htmlAttributes.id ? this.htmlAttributes.id : this.element.id } });
         const frameSpan: Element = this.createElement('span', { className: 'e-icons ' + FRAME });
         wrapper.classList.add('e-wrapper');
         if (this.enableRtl) {

controls/buttons/src/switch/switch.ts

@@ -164,11 +164,6 @@ export class Switch extends Component<HTMLInputElement> implements INotifyProper
         this.element.focus();
         const changeEventArgs: ChangeEventArgs = { checked: this.element.checked, event: evt };
         this.trigger('change', changeEventArgs);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        if ((this as any).isAngular && evt) {
-            evt.stopPropagation();
-            evt.preventDefault();
-        }
     }
     /**
      * Destroys the Switch widget.
@@ -427,10 +422,15 @@ export class Switch extends Component<HTMLInputElement> implements INotifyProper
             }
         }
     }
-    private switchFocusHandler(): void {
+    private switchFocusHandler(e?: KeyboardEvent): void {
         if (this.isFocused) {
             (this.getWrapper() as Element).classList.add('e-focus');
         }
+        if (e && e.type === 'keyup' && e.code === 'Space' && (this as any).isAngular) {
+            this.clickHandler(e);
+            e.stopPropagation();
+            e.preventDefault();
+        }
     }
     private switchMouseUp(e: MouseEventArgs): void {
         let aTouchY: number = 0; let yDiff: number = 0;

controls/calendars/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 ## [Unreleased]
 
+## 27.2.3 (2024-11-21)
+
+### DatePicker
+
+#### Bug Fixes
+
+- `#I648389` -  Fixed an issue where the CSS for the selected value was removed when the minimum and maximum properties were changed dynamically.
+
+- `#I654432` - Fixed an issue where the Clear Icon was displayed when the enable mask support had no value.
+
 ## 27.2.2 (2024-11-15)
 
 ### DatePicker

controls/calendars/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-calendars",
-	"version": "27.1.57",
+	"version": "27.2.2",
 	"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/datetimepicker/datetimepicker.spec.ts

@@ -4530,6 +4530,8 @@ describe('Masked date time backspace with minute ', () => {
         datetimepicker.element.selectionStart = 0;
         mouseEventArgs.e.key = 'Backspace';
         (<any>mask).maskKeydownHandler(mouseEventArgs);
+        datetimepicker.focusIn();
+        (<any>mask).clearHandler();
         datetimepicker.destroy();
     });
 

controls/calendars/src/datepicker/datepicker.ts

@@ -1057,6 +1057,9 @@ export class DatePicker extends Calendar implements IInput {
                 this.inputElement.selectionEnd = this.inputElement.value.length;
             }
         }
+        if (this.enableMask && this.showClearButton && this.inputElement && this.inputElement.value === this.maskedDateValue && this.inputWrapper && this.inputWrapper.clearButton && !this.inputWrapper.clearButton.classList.contains('e-clear-icon-hide')) {
+            this.inputWrapper.clearButton.classList.add('e-clear-icon-hide');
+        }
         const focusArguments: BlurEventArgs = {
             model: this
         };
@@ -1566,6 +1569,9 @@ export class DatePicker extends Calendar implements IInput {
     }
     protected keyupHandler(e: KeyboardEventArgs): void {
         this.isKeyAction = (this.inputElement.value !== this.previousElementValue) ? true : false;
+        if (this.enableMask && this.showClearButton && this.inputElement && this.inputElement.value === this.maskedDateValue && this.inputWrapper && this.inputWrapper.clearButton && !this.inputWrapper.clearButton.classList.contains('e-clear-icon-hide')) {
+            this.inputWrapper.clearButton.classList.add('e-clear-icon-hide');
+        }
     }
     protected changeEvent(event?: MouseEvent | KeyboardEvent | Event): void {
         if (!this.isIconClicked && !(this.isBlur || this.isKeyAction)) {