feat: add new event onFilterClear missing (#260)

- we already have `onClear` event on the select button, but we should also add `onFilterClear` to be associated to the input filter
ghiscoding · Mar 23, 2024 · cb8923c · cb8923c
1 parent 6f854a1
commit cb8923c
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 0 deletions.
diff --git a/packages/demo/src/events/events.ts b/packages/demo/src/events/events.ts
@@ -8,6 +8,7 @@ export default class Example {
     this.logElm = document.querySelector('textarea') as HTMLTextAreaElement;
     this.ms1 = multipleSelect('select', {
       filter: true,
+      showSearchClear: true,
       onOpen: () => {
         this.log('onOpen event fire!\n');
       },
@@ -35,6 +36,9 @@ export default class Example {
       onFilter: text => {
         this.log(`onFilter event fire! text: ${text}\n`);
       },
+      onFilterClear: () => {
+        this.log('onFilterClear event fire!\n');
+      },
       onAfterCreate: () => {
         this.log('onAfterCreate event fire!\n');
       },

diff --git a/packages/demo/src/options/options34.ts b/packages/demo/src/options/options34.ts
@@ -7,6 +7,7 @@ export default class Example {
     this.ms = multipleSelect('select', {
       filter: true,
       showSearchClear: true,
+      // onFilterClear: () => console.log('search filter cleared'),
     }) as MultipleSelectInstance[];
   }
 

diff --git a/packages/multiple-select-vanilla/src/MultipleSelectInstance.ts b/packages/multiple-select-vanilla/src/MultipleSelectInstance.ts
@@ -853,6 +853,7 @@ export class MultipleSelectInstance {
         this._currentHighlightIndex = -1;
         this.moveHighlightDown();
         this.filter();
+        this.options.onFilterClear();
       }) as EventListener);
     }
 

diff --git a/packages/multiple-select-vanilla/src/constants.ts b/packages/multiple-select-vanilla/src/constants.ts
@@ -73,6 +73,7 @@ const DEFAULTS: Partial<MultipleSelectOption> = {
   onBeforeClick: () => true,
   onClick: () => false,
   onFilter: () => false,
+  onFilterClear: () => false,
   onClear: () => false,
   onAfterCreate: () => false,
   onDestroy: () => false,

diff --git a/packages/multiple-select-vanilla/src/interfaces/multipleSelectOption.interface.ts b/packages/multiple-select-vanilla/src/interfaces/multipleSelectOption.interface.ts
@@ -265,6 +265,9 @@ export interface MultipleSelectOption extends MultipleSelectLocale {
   /** Fires when a checkbox filter is changed. */
   onFilter: (text?: string) => void;
 
+  /** Fires when the search filter is cleared. */
+  onFilterClear: () => void;
+
   /** Custom parser to remove diacritic signs (accents) from characters when filtering select list. */
   diacriticParser: (text: string) => string;
 

diff --git a/playwright/e2e/events.spec.ts b/playwright/e2e/events.spec.ts
@@ -71,5 +71,26 @@ test.describe('Events Demo', () => {
         'onFilter event fire! text: 1',
       ].join('\n'),
     );
+
+    await page.locator('.ms-search .ms-icon-close').click();
+    await expect(textareaLoc).toHaveText(
+      [
+        'onAfterCreate event fire!',
+        'onFocus event fire!',
+        'onBlur event fire!',
+        'onOpen event fire!',
+        'onFocus event fire!',
+        'onClose 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]}',
+        'onCheckAll event fire!',
+        'onCheckAll event fire!',
+        'onFilter event fire! text: 1',
+        'onCheckAll event fire!',
+        'onFilter event fire! text: ',
+        'onFilterClear event fire!',
+      ].join('\n'),
+    );
   });
 });