Fix: Emitting the change event of the checkbox (#1048)

* Fix v1

* Cypress test v1

* Changelog v1

Author: jogaj

cypress/e2e/components/card.cy.ts

@@ -0,0 +1,18 @@
+describe('Dropdowns', () => {
+  before(() => {
+    cy.visit('/card');
+    cy.get('.page-loader').should('not.exist', { timeout: 20000 });
+  });
+
+  describe('Selectable card', () => {
+    it('should emit onSelect - it comes from the emitter named `change` of the checkbox component', () => {
+      cy.dataCy('card-selectable').as('cardSelectable');
+      cy.dataCy('card-onselect-event').as('cardOnSelectEvent');
+      cy.get('@cardSelectable').scrollIntoView();
+      cy.get('@cardSelectable').find('input[type=checkbox]').click();
+      cy.get('@cardOnSelectEvent').should('be.visible').should('have.text', 'onSelect event: true');
+      cy.get('@cardSelectable').find('input[type=checkbox]').click();
+      cy.get('@cardOnSelectEvent').should('be.visible').should('have.text', 'onSelect event: false');
+    });
+  });
+});

projects/swimlane/ngx-ui/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## HEAD (unreleased)
 
+- Fix: Emitting change event when clicking the ngx-checkbox
+
 ## 48.0.1 (2023-08-13)
 
 - Enhancement: Provide normalize css internally to support esbuild.

projects/swimlane/ngx-ui/src/lib/components/checkbox/checkbox.component.ts

@@ -43,6 +43,7 @@ export class CheckboxComponent implements ControlValueAccessor {
     if (!this.disabled) {
       this.toggle();
     }
+    this.emitChange();
   }
 
   @HostBinding()
@@ -126,4 +127,8 @@ export class CheckboxComponent implements ControlValueAccessor {
   private onChangeCallback = (_: any) => {
     // placeholder
   };
+
+  private emitChange() {
+    this.change.emit({ stopPropagation: () => {}, target: { checked: this._value } } as any);
+  }
 }

src/app/components/card-page/card-page.component.html

@@ -168,6 +168,7 @@ <h4> Selectable Cards </h4>
           [selected]="isSelected"
           (select)="onSelect($event)"
           (click)="onClick()"
+          data-cy="card-selectable"
         >
           <ngx-card-header>
             <ngx-card-avatar src="data:image/png;base64,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"></ngx-card-avatar>
@@ -181,6 +182,8 @@ <h4> Selectable Cards </h4>
             </ngx-card-subtitle>
           </ngx-card-header>
         </ngx-card>
+
+        <p data-cy="card-onselect-event">onSelect event: {{ onSelectValue }}</p>
 
         <app-prism>
           <![CDATA[<ngx-card

src/app/components/card-page/card-page.component.ts

@@ -10,7 +10,8 @@ import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, V
 })
 export class CardPageComponent implements AfterViewInit {
   cardWidth: number;
-  isSelected = true;
+  isSelected = false;
+  onSelectValue = false;
   constructor(private readonly cdr: ChangeDetectorRef) {}
 
   ngAfterViewInit(): void {
@@ -32,6 +33,7 @@ export class CardPageComponent implements AfterViewInit {
 
   onSelect(isSelected: boolean) {
     console.log('Card select', isSelected);
+    this.onSelectValue = isSelected;
   }
 
   onActionClick() {