feat: add reason param to onClose(reason) (#273)

Author: ghiscoding

package.json

@@ -53,7 +53,8 @@
     "test:e2e": "playwright test --config playwright/playwright.config.ts",
     "test:e2e:debug": "playwright test --config playwright/playwright.config.ts --ui --debug",
     "test:e2e:ui": "playwright test --config playwright/playwright.config.ts --ui",
-    "test:report": "playwright show-report"
+    "test:report": "playwright show-report",
+    "playwright:install": "pnpm exec playwright install"
   },
   "packageManager": "[email protected]",
   "devDependencies": {

packages/demo/src/events/events.ts

@@ -12,8 +12,8 @@ export default class Example {
       onOpen: () => {
         this.log('onOpen event fire!\n');
       },
-      onClose: () => {
-        this.log('onClose event fire!\n');
+      onClose: reason => {
+        this.log(`onClose event fire! Reason: "${reason}"\n`);
       },
       onCheckAll: () => {
         this.log('onCheckAll event fire!\n');

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

@@ -3,7 +3,7 @@
  */
 import Constants from './constants';
 import type { HtmlStruct, MultipleSelectLocales, OptGroupRowData, OptionDataObject, OptionRowData } from './interfaces';
-import type { MultipleSelectOption } from './interfaces/multipleSelectOption.interface';
+import type { CloseReason, MultipleSelectOption } from './interfaces/multipleSelectOption.interface';
 import { BindingEventService, VirtualScroll } from './services';
 import { compareObjects, deepCopy, findByParam, removeDiacritics, removeUndefined, setDataKeys, stripScripts } from './utils';
 import {
@@ -267,7 +267,7 @@ export class MultipleSelectInstance {
             (e.target === this.dropElm || (findParent(e.target, '.ms-drop') !== this.dropElm && e.target !== this.elm)) &&
             this.options.isOpen
           ) {
-            this.close();
+            this.close('body.click');
           }
         }) as EventListener,
         undefined,
@@ -372,7 +372,7 @@ export class MultipleSelectInstance {
 
     if (this.options.openOnHover && this.parentElm) {
       this._bindEventService.bind(this.parentElm, 'mouseover', () => this.open(null));
-      this._bindEventService.bind(this.parentElm, 'mouseout', () => this.close());
+      this._bindEventService.bind(this.parentElm, 'mouseout', () => this.close('hover.mouseout'));
     }
   }
 
@@ -801,7 +801,7 @@ export class MultipleSelectInstance {
       if (e.target.classList.contains('ms-icon-close')) {
         return;
       }
-      this[this.options.isOpen ? 'close' : 'open']();
+      this.options.isOpen ? this.close('toggle.close') : this.open();
     };
 
     if (this.labelElm) {
@@ -864,7 +864,7 @@ export class MultipleSelectInstance {
         ((e: KeyboardEvent) => {
           // Ensure shift-tab causes lost focus from filter as with clicking away
           if (e.code === 'Tab' && e.shiftKey) {
-            this.close();
+            this.close('key.shift+tab');
           }
         }) as EventListener,
         undefined,
@@ -891,7 +891,7 @@ export class MultipleSelectInstance {
             } else {
               this.selectAllElm?.click();
             }
-            this.close();
+            this.close(`key.${e.code.toLowerCase() as 'enter' | 'space'}`);
             this.focus();
             return;
           }
@@ -966,7 +966,7 @@ export class MultipleSelectInstance {
         const option = findByParam(this.data, '_key', selectElm.dataset.key);
         const close = () => {
           if (this.options.single && this.options.isOpen && !this.options.keepOpen) {
-            this.close();
+            this.close('selection');
           }
         };
 
@@ -1068,7 +1068,7 @@ export class MultipleSelectInstance {
                   this.focusSelectAllOrList();
                   this.highlightCurrentOption();
                 } else {
-                  this.close();
+                  this.close('key.shift+tab');
                   this.choiceElm.focus();
                 }
               } else {
@@ -1091,7 +1091,7 @@ export class MultipleSelectInstance {
 
   protected handleEscapeKey() {
     if (!this.options.keepOpen) {
-      this.close();
+      this.close('key.escape');
       this.choiceElm.focus();
     }
   }
@@ -1339,7 +1339,7 @@ export class MultipleSelectInstance {
     }
   }
 
-  close() {
+  close(reason?: CloseReason) {
     this.options.isOpen = false;
     this.parentElm.classList.remove('ms-parent-open');
     this.choiceElm?.querySelector('div.ms-icon-caret')?.classList.remove('open');
@@ -1351,7 +1351,7 @@ export class MultipleSelectInstance {
       this.dropElm.style.top = 'auto';
       this.dropElm.style.left = 'auto';
     }
-    this.options.onClose();
+    this.options.onClose(reason);
   }
 
   /**

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

@@ -8,6 +8,17 @@ export interface MultipleSelectView {
   instance: any;
 }
 
+export type CloseReason =
+  | 'body.click'
+  | 'hover.mouseout'
+  | 'key.shift+tab'
+  | 'key.escape'
+  | 'key.enter'
+  | 'key.space'
+  | 'selection'
+  | 'toggle.close'
+  | 'custom';
+
 export type CSSStyleDeclarationReadonly =
   | 'length'
   | 'parentRule'
@@ -239,7 +250,7 @@ export interface MultipleSelectOption extends MultipleSelectLocale {
   onClear: () => void;
 
   /** Fires when the dropdown list is close. */
-  onClose: () => void;
+  onClose: (reason?: CloseReason) => void;
 
   /** Fires when all the options are checked by either clicking the `Select all` checkbox, or when the `checkall` method is programatically called. */
   onCheckAll: () => void;

playwright/e2e/events.spec.ts

@@ -17,7 +17,7 @@ test.describe('Events Demo', () => {
         'onBlur event fire!',
         'onOpen event fire!',
         'onFocus event fire!',
-        'onClose event fire!',
+        'onClose event fire! Reason: "toggle.close"',
       ].join('\n'),
     );
 
@@ -31,7 +31,7 @@ test.describe('Events Demo', () => {
         'onBlur event fire!',
         'onOpen event fire!',
         'onFocus event fire!',
-        'onClose event fire!',
+        'onClose event fire! Reason: "toggle.close"',
         '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]}',
@@ -46,7 +46,7 @@ test.describe('Events Demo', () => {
         'onBlur event fire!',
         'onOpen event fire!',
         'onFocus event fire!',
-        'onClose event fire!',
+        'onClose event fire! Reason: "toggle.close"',
         '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]}',
@@ -62,7 +62,7 @@ test.describe('Events Demo', () => {
         'onBlur event fire!',
         'onOpen event fire!',
         'onFocus event fire!',
-        'onClose event fire!',
+        'onClose event fire! Reason: "toggle.close"',
         '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]}',
@@ -80,7 +80,7 @@ test.describe('Events Demo', () => {
         'onBlur event fire!',
         'onOpen event fire!',
         'onFocus event fire!',
-        'onClose event fire!',
+        'onClose event fire! Reason: "toggle.close"',
         '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]}',