fix: normalize event data & remove null group items (#376)

Author: ghiscoding

packages/multiple-select-vanilla/src/MultipleSelectInstance.ts

@@ -981,17 +981,17 @@ export class MultipleSelectInstance {
               label: group.label,
               selected: !!group.selected,
               data: group._data,
-              children: group.children.map((child: any) => {
-                if (child) {
+              children: group.children
+                .filter((c: any) => c)
+                .map((child: any) => {
                   return removeUndefined({
-                    text: child.text,
+                    label: child.text,
                     value: child.value,
                     selected: child.selected,
                     disabled: child.disabled,
                     data: child._data,
                   });
-                }
-              }),
+                }),
             }),
           );
           this.handleOnChange('onOptgroupClick', {
@@ -1027,7 +1027,7 @@ export class MultipleSelectInstance {
           this._check(option, checked);
           this.options.onClick(
             removeUndefined({
-              text: option.text,
+              label: option.text,
               value: option.value,
               selected: option.selected,
               data: option._data,

packages/multiple-select-vanilla/src/models/multipleSelectOption.interface.ts

@@ -5,9 +5,16 @@ import type { LocaleKey, MultipleSelectLocale } from './locale.interface.js';
 
 export interface MultipleSelectView {
   label: string;
-  value: any;
-  checked: boolean;
-  instance: any;
+  value?: any;
+  selected: boolean;
+  data: any;
+  children?: Array<{
+    label: string;
+    value: any;
+    selected: boolean;
+    disabled: boolean;
+    data: any;
+  }>;
 }
 
 export interface ClickedItem<T extends 'option' | 'optgroup'> {

packages/multiple-select-vanilla/src/utils/utils.ts

@@ -111,8 +111,8 @@ export function stripScripts(dirtyHtml: string) {
   );
 }
 
-export function removeUndefined(obj: any) {
-  Object.keys(obj).forEach(key => (obj[key] === undefined ? delete obj[key] : ''));
+export function removeUndefined<T extends Record<string, unknown> = Record<string, unknown>>(obj: T): T {
+  Object.keys(obj).forEach(key => (!isDefined(obj[key]) ? delete obj[key] : ''));
   return obj;
 }
 

playwright/e2e/events.spec.ts

@@ -39,7 +39,7 @@ test.describe('Events Demo', () => {
         'onBeforeOpen event fire!',
         'onBlur event fire!',
         'onOpen event fire!',
-        'onOptgroupClick event fire! view: {"label":"Group 1","selected":true,"children":[null,{"text":"Option 1","value":"1","selected":true,"disabled":false},null,{"text":"Option 2","value":"2","selected":true,"disabled":false},null,{"text":"Option 3","value":"3","selected":true,"disabled":false},null]}',
+        'onOptgroupClick event fire! view: {"label":"Group 1","selected":true,"children":[{"label":"Option 1","value":"1","selected":true,"disabled":false},{"label":"Option 2","value":"2","selected":true,"disabled":false},{"label":"Option 3","value":"3","selected":true,"disabled":false}]}',
         'onChange event fire! data: {"eventName":"onOptgroupClick","item":{"label":"Group 1","selected":true,"type":"optgroup"},"selection":{"labels":["[Group 1: Option 1, Option 2, Option 3]"],"values":["1","2","3"]}}',
       ].join('\n'),
     );
@@ -57,7 +57,7 @@ test.describe('Events Demo', () => {
         'onBeforeOpen event fire!',
         'onBlur event fire!',
         'onOpen event fire!',
-        'onOptgroupClick event fire! view: {"label":"Group 1","selected":true,"children":[null,{"text":"Option 1","value":"1","selected":true,"disabled":false},null,{"text":"Option 2","value":"2","selected":true,"disabled":false},null,{"text":"Option 3","value":"3","selected":true,"disabled":false},null]}',
+        'onOptgroupClick event fire! view: {"label":"Group 1","selected":true,"children":[{"label":"Option 1","value":"1","selected":true,"disabled":false},{"label":"Option 2","value":"2","selected":true,"disabled":false},{"label":"Option 3","value":"3","selected":true,"disabled":false}]}',
         'onChange event fire! data: {"eventName":"onOptgroupClick","item":{"label":"Group 1","selected":true,"type":"optgroup"},"selection":{"labels":["[Group 1: Option 1, Option 2, Option 3]"],"values":["1","2","3"]}}',
         'onCheckAll event fire!',
         'onChange event fire! data: {"eventName":"onCheckAll","selection":{"labels":["[Group 1: Option 1, Option 2, Option 3]","[Group 2: Option 4, Option 5, Option 6]","[Group 3: Option 7, Option 8, Option 9]"],"values":["1","2","3","4","5","6","7","8","9"]}}',
@@ -77,7 +77,7 @@ test.describe('Events Demo', () => {
         'onBeforeOpen event fire!',
         'onBlur event fire!',
         'onOpen event fire!',
-        'onOptgroupClick event fire! view: {"label":"Group 1","selected":true,"children":[null,{"text":"Option 1","value":"1","selected":true,"disabled":false},null,{"text":"Option 2","value":"2","selected":true,"disabled":false},null,{"text":"Option 3","value":"3","selected":true,"disabled":false},null]}',
+        'onOptgroupClick event fire! view: {"label":"Group 1","selected":true,"children":[{"label":"Option 1","value":"1","selected":true,"disabled":false},{"label":"Option 2","value":"2","selected":true,"disabled":false},{"label":"Option 3","value":"3","selected":true,"disabled":false}]}',
         'onChange event fire! data: {"eventName":"onOptgroupClick","item":{"label":"Group 1","selected":true,"type":"optgroup"},"selection":{"labels":["[Group 1: Option 1, Option 2, Option 3]"],"values":["1","2","3"]}}',
         'onCheckAll event fire!',
         'onChange event fire! data: {"eventName":"onCheckAll","selection":{"labels":["[Group 1: Option 1, Option 2, Option 3]","[Group 2: Option 4, Option 5, Option 6]","[Group 3: Option 7, Option 8, Option 9]"],"values":["1","2","3","4","5","6","7","8","9"]}}',
@@ -100,7 +100,7 @@ test.describe('Events Demo', () => {
         'onBeforeOpen event fire!',
         'onBlur event fire!',
         'onOpen event fire!',
-        'onOptgroupClick event fire! view: {"label":"Group 1","selected":true,"children":[null,{"text":"Option 1","value":"1","selected":true,"disabled":false},null,{"text":"Option 2","value":"2","selected":true,"disabled":false},null,{"text":"Option 3","value":"3","selected":true,"disabled":false},null]}',
+        'onOptgroupClick event fire! view: {"label":"Group 1","selected":true,"children":[{"label":"Option 1","value":"1","selected":true,"disabled":false},{"label":"Option 2","value":"2","selected":true,"disabled":false},{"label":"Option 3","value":"3","selected":true,"disabled":false}]}',
         'onChange event fire! data: {"eventName":"onOptgroupClick","item":{"label":"Group 1","selected":true,"type":"optgroup"},"selection":{"labels":["[Group 1: Option 1, Option 2, Option 3]"],"values":["1","2","3"]}}',
         'onCheckAll event fire!',
         'onChange event fire! data: {"eventName":"onCheckAll","selection":{"labels":["[Group 1: Option 1, Option 2, Option 3]","[Group 2: Option 4, Option 5, Option 6]","[Group 3: Option 7, Option 8, Option 9]"],"values":["1","2","3","4","5","6","7","8","9"]}}',