feat: added onBeforeClick event (#141)

- Use `onBeforeClick` to prevent the click event, as per original ms-select lib PR wenzhixin/multiple-select#610
ghiscoding · Oct 27, 2023 · 6b0cdb8 · 6b0cdb8
1 parent 02c1d45
commit 6b0cdb8
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/lib/src/MultipleSelectInstance.ts b/lib/src/MultipleSelectInstance.ts
@@ -769,6 +769,16 @@ export class MultipleSelectInstance {
       const selectElm = e.currentTarget;
       const checked = selectElm.checked;
       const option = findByParam(this.data, '_key', selectElm.dataset.key);
+      const close = () => {
+        if (this.options.single && this.options.isOpen && !this.options.keepOpen) {
+          this.close();
+        }
+      };
+
+      if (this.options.onBeforeClick(option) === false) {
+        close();
+        return;
+      }
 
       this._check(option, checked);
       this.options.onClick(
@@ -780,9 +790,7 @@ export class MultipleSelectInstance {
         })
       );
 
-      if (this.options.single && this.options.isOpen && !this.options.keepOpen) {
-        this.close();
-      }
+      close();
     }) as EventListener);
   }
 

diff --git a/lib/src/constants.ts b/lib/src/constants.ts
@@ -66,6 +66,7 @@ const DEFAULTS: Partial<MultipleSelectOption> = {
   onFocus: () => false,
   onBlur: () => false,
   onOptgroupClick: () => false,
+  onBeforeClick: () => true,
   onClick: () => false,
   onFilter: () => false,
   onClear: () => false,

diff --git a/lib/src/interfaces/multipleSelectOption.interface.ts b/lib/src/interfaces/multipleSelectOption.interface.ts
@@ -226,6 +226,9 @@ export interface MultipleSelectOption extends MultipleSelectLocale {
   /** Fires when a an optgroup label is clicked on. */
   onOptgroupClick: (view: MultipleSelectView) => void;
 
+  /** Fires before a checkbox is clicked. Return `false` to prevent the click event. */
+  onBeforeClick: (view: MultipleSelectView) => boolean;
+
   /** Fires when a checkbox is checked or unchecked. */
   onClick: (view: MultipleSelectView) => void;