v27.1.56 is released

Author: pipeline

controls/barcodegenerator/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## [Unreleased]
 
-## 27.1.55 (2024-10-22)
+## 27.1.56 (2024-10-23)
 
 ### Barcode
 

controls/base/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## [Unreleased]
 
-## 27.1.55 (2024-10-22)
+## 27.1.56 (2024-10-23)
 
 ### Common
 

controls/buttons/CHANGELOG.md

@@ -2,7 +2,15 @@
 
 ## [Unreleased]
 
-## 27.1.55 (2024-10-22)
+## 27.1.53 (2024-10-15)
+
+### Checkbox
+
+#### Bug Fixes
+
+- `#F60464`- The issue with "checkbox state input element checked state was not update properly " has been resolved.
+
+## 27.1.51 (2024-09-30)
 
 ### Checkbox
 

controls/buttons/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-buttons",
-	"version": "27.1.50",
+	"version": "27.1.53",
 	"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",
@@ -26,7 +26,7 @@
 		"canteen": "^1.0.5",
 		"jasmine-ajax": "^3.3.1",
 		"jasmine-core": "^2.6.1",
-		 "karma": "6.4.2",
+		"karma": "6.4.2",
 		"karma-chrome-launcher": "^2.2.0",
 		"karma-generic-preprocessor": "^1.1.0",
 		"karma-htmlfile-reporter": "^0.3.5",

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

@@ -424,6 +424,7 @@ describe('CheckBox', () => {
     describe('CheckBox in HTML5 forms', () => {
         let input: HTMLFormElement;
         let input1: HTMLFormElement;
+        let input2: HTMLFormElement;
         let formElement: HTMLFormElement;
         let cbox: CheckBox;
         let cbox1: CheckBox;
@@ -439,11 +440,21 @@ describe('CheckBox', () => {
 
             input1 = createElement('input', { id: 'checkbox2' }) as HTMLFormElement;
             input1.setAttribute('type', 'checkbox');
+            input2 = createElement('input', { id: 'checkbox3' }) as HTMLFormElement;
 
             formElement.appendChild(input);
             formElement.appendChild(input1);
+            formElement.appendChild(input2);
 
             document.body.appendChild(formElement);
+
+            let buttonElement = document.createElement('button');
+            buttonElement.setAttribute('id', 'checkButton');
+            document.body.appendChild(buttonElement);
+            buttonElement.addEventListener('click', () => {
+                checkbox.checked = true; // Set the checkbox to checked
+                checkbox.dataBind();
+            });
         })
 
         afterEach(() => {
@@ -490,6 +501,26 @@ describe('CheckBox', () => {
             expect(cbox.checked).toBeFalsy();
             expect(cbox1.checked).toBeFalsy();
         });
+
+        it('908821-Checkbox component bug using required attribute', () => {
+            checkbox = new CheckBox({
+                checked: false,
+                created: created,
+            }, '#checkbox3');
+            checkbox.isVue = true;
+            function created() {
+                if (checkbox.element) {
+                    checkbox.element.setAttribute('required', ''); // Set the required attribute
+                }
+            }
+            const button = document.querySelector('#checkButton') as HTMLButtonElement;
+            button.click();
+            expect(checkbox.element.checked).toBe(true);
+            checkbox.checked = false;
+            checkbox.dataBind();
+            expect(checkbox.element.checked).toBe(false);
+            checkbox.isVue = false;
+        });
     });
 
     describe('Notify Html Attributes property changes of', () => {
@@ -528,7 +559,6 @@ describe('CheckBox', () => {
             checkbox.dataBind();
             expect(element.parentElement.children[0].getAttribute("readonly").indexOf("true")).toEqual(0);
         });
-
 
     });
 

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

@@ -22,7 +22,7 @@ const RIPPLECHECK: string = 'e-ripple-check';
 const RIPPLEINDETERMINATE: string = 'e-ripple-stop';
 const RTL: string = 'e-rtl';
 const WRAPPER: string = 'e-checkbox-wrapper';
-const containerAttr: string[] = ['title', 'class', 'style', 'disabled', 'readonly', 'name', 'value', 'id', 'tabindex', 'aria-label'];
+const containerAttr: string[] = ['title', 'class', 'style', 'disabled', 'readonly', 'name', 'value', 'id', 'tabindex', 'aria-label', 'required'];
 
 /**
  * The CheckBox is a graphical user interface element that allows you to select one or more options from the choices.
@@ -165,7 +165,7 @@ export class CheckBox extends Component<HTMLInputElement> implements INotifyProp
         super(options, <string | HTMLInputElement>element);
     }
 
-    private changeState(state?: string, isInitialize?: boolean ): void {
+    private changeState(state?: string, isInitialize?: boolean, isInterAction?: boolean): void {
         const wrapper: Element = this.getWrapper() as Element;
         let rippleSpan: Element | null = null;
         let frameSpan: Element | null = null;
@@ -185,7 +185,7 @@ export class CheckBox extends Component<HTMLInputElement> implements INotifyProp
                 rippleSpan.classList.add(RIPPLECHECK);
             }
             this.element.checked = true;
-            if ((this.element.required || closest(this.element, 'form') && closest(this.element, 'form').classList.contains('e-formvalidator')) && this.validCheck && !isInitialize) {
+            if ((this.element.required || closest(this.element, 'form') && closest(this.element, 'form').classList.contains('e-formvalidator')) && this.validCheck && !isInitialize && isInterAction) {
                 this.element.checked = false;
                 this.validCheck = false;
             } else if (this.element.required || closest(this.element, 'form') && closest(this.element, 'form').classList.contains('e-formvalidator')) {
@@ -199,7 +199,7 @@ export class CheckBox extends Component<HTMLInputElement> implements INotifyProp
                 removeClass([rippleSpan], [RIPPLECHECK, RIPPLEINDETERMINATE]);
             }
             this.element.checked = false;
-            if ((this.element.required || closest(this.element, 'form') && closest(this.element, 'form').classList.contains('e-formvalidator')) && this.validCheck && !isInitialize) {
+            if ((this.element.required || closest(this.element, 'form') && closest(this.element, 'form').classList.contains('e-formvalidator')) && this.validCheck && !isInitialize && isInterAction) {
                 this.element.checked = true;
                 this.validCheck = false;
             } else if (this.element.required || closest(this.element, 'form') && closest(this.element, 'form').classList.contains('e-formvalidator')) {
@@ -221,9 +221,6 @@ export class CheckBox extends Component<HTMLInputElement> implements INotifyProp
 
     private clickHandler(event: Event): void {
         if ((event.target as HTMLElement).tagName === 'INPUT' && this.clickTriggered) {
-            if (this.isVue) {
-                this.changeState(this.checked ? 'check' : 'uncheck');
-            }
             this.clickTriggered = false;
             return;
         }
@@ -236,14 +233,14 @@ export class CheckBox extends Component<HTMLInputElement> implements INotifyProp
             this.isMouseClick = false;
         }
         if (this.indeterminate) {
-            this.changeState(this.checked ? 'check' : 'uncheck');
+            this.changeState(this.checked ? 'check' : 'uncheck', false, true);
             this.indeterminate = false;
             this.element.indeterminate = false;
         } else if (this.checked) {
-            this.changeState('uncheck');
+            this.changeState('uncheck', false, true);
             this.checked = false;
         } else {
-            this.changeState('check');
+            this.changeState('check', false, true);
             this.checked = true;
         }
         const changeEventArgs: ChangeEventArgs = { checked: this.updateVueArrayModel(false), event: event };

controls/calendars/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## [Unreleased]
 
-## 27.1.55 (2024-10-22)
+## 27.1.56 (2024-10-23)
 
 ### DateTimePicker
 

controls/charts/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## [Unreleased]
 
-## 27.1.55 (2024-10-22)
+## 27.1.56 (2024-10-23)
 
 ### Chart
 

controls/circulargauge/CHANGELOG.md

@@ -4,7 +4,7 @@
 
 ## [Unreleased]
 
-## 27.1.55 (2024-10-22)
+## 27.1.56 (2024-10-23)
 
 ### Circular Gauge
 

controls/data/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## [Unreleased]
 
-## 27.1.55 (2024-10-22)
+## 27.1.56 (2024-10-23)
 
 ### DataManager