fixed events

Author: GrabowskiM

eslint.config.mjs

@@ -1,3 +1,10 @@
 import getIbexaConfig from '@ibexa/eslint-config/eslint';
-
-export default getIbexaConfig({ react: false });
+[
+    ...getIbexaConfig({ react: false }),
+    {
+        files: ['**/*.stories.ts'],
+        rules: {
+            '@typescript-eslint/unbound-method': 'off',
+        },
+    },
+];

src/bundle/Resources/public/ts/components/checkbox/checkboxes_list_field.ts

@@ -1,4 +1,3 @@
-import { ChangeEvent } from 'react';
 import { BaseInputsList } from '../../partials';
 
 export enum CheckboxesListFieldAction {
@@ -9,6 +8,11 @@ export enum CheckboxesListFieldAction {
 export class CheckboxesListField extends BaseInputsList<string[]> {
     private _itemsContainer: HTMLDivElement;
 
+    static EVENTS = {
+        ...BaseInputsList.EVENTS,
+        CHANGE: 'ids:checkboxes-list-field:change',
+    };
+
     constructor(container: HTMLDivElement) {
         super(container);
 
@@ -21,11 +25,12 @@ export class CheckboxesListField extends BaseInputsList<string[]> {
         this._itemsContainer = itemsContainer;
 
         this.onItemChange = this.onItemChange.bind(this);
-        // this.onChange = this.onChange.bind(this);
     }
 
     getItemsCheckboxes() {
-        const itemsCheckboxes = [...this._itemsContainer.querySelectorAll<HTMLInputElement>('.ids-choice-input-field .ids-input--checkbox')];
+        const itemsCheckboxes = [
+            ...this._itemsContainer.querySelectorAll<HTMLInputElement>('.ids-choice-input-field .ids-input--checkbox'),
+        ];
 
         return itemsCheckboxes;
     }
@@ -56,19 +61,15 @@ export class CheckboxesListField extends BaseInputsList<string[]> {
     }
 
     onChange(nextValue: string[], itemValue: string, actionPerformed: CheckboxesListFieldAction) {
-        const changeEvent = new CustomEvent('change', {
+        const changeEvent = new CustomEvent(CheckboxesListField.EVENTS.CHANGE, {
             bubbles: true,
-            detail: [
-                nextValue,
-                itemValue,
-                actionPerformed,
-            ],
+            detail: [nextValue, itemValue, actionPerformed],
         });
 
+        console.log(changeEvent.detail);
         this._container.dispatchEvent(changeEvent);
     }
 
-
     initCheckboxes() {
         const itemsCheckboxes = this.getItemsCheckboxes();
 
@@ -77,6 +78,21 @@ export class CheckboxesListField extends BaseInputsList<string[]> {
         });
     }
 
+    unbindCheckboxes() {
+        const itemsCheckboxes = this.getItemsCheckboxes();
+
+        itemsCheckboxes.forEach((checkbox) => {
+            checkbox.removeEventListener('change', this.onItemChange, false);
+        });
+    }
+
+    reinit() {
+        super.reinit();
+
+        this.unbindCheckboxes();
+        this.initCheckboxes();
+    }
+
     init() {
         super.init();
 

src/bundle/Resources/public/ts/partials/base.ts

@@ -17,6 +17,10 @@ export abstract class Base {
         return this._container;
     }
 
+    reinit() {
+        // to be overridden in subclasses if needed
+    }
+
     init() {
         this._container.setAttribute('data-ids-initialized', 'true');
 

src/bundle/Resources/views/themes/standard/design_system/components/checkbox/list_field.html.twig

@@ -1,5 +1,7 @@
 {% extends '@IbexaDesignSystemTwig/themes/standard/design_system/partials/base_inputs_list.html.twig' %}
 
+{% set class = html_classes('ids-checkboxes-list-field', attributes.render('class') ?? '') %}
+
 {% block item %}
     <twig:ibexa:checkbox:field {{ ...item }}>
         {{ item.label }}