From 0091ad31e9e91a1660b8bde206d83d6023105bbb Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Mon, 6 Nov 2023 08:02:49 -0500
Subject: [PATCH] Fix #5247: Multiselect onRemove event (#5248)

---
 components/lib/multiselect/MultiSelect.js     |  7 +++++++
 components/lib/multiselect/MultiSelectBase.js |  1 +
 components/lib/multiselect/multiselect.d.ts   | 20 +++++++++++++++++++
 3 files changed, 28 insertions(+)

diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
index c2d041bdf8..c430b6f38a 100644
--- a/components/lib/multiselect/MultiSelect.js
+++ b/components/lib/multiselect/MultiSelect.js
@@ -481,6 +481,13 @@ export const MultiSelect = React.memo(
         const removeChip = (event, item) => {
             const value = props.value.filter((val) => !ObjectUtils.equals(val, item, equalityKey));
 
+            if (props.onRemove) {
+                props.onRemove({
+                    originalEvent: event,
+                    value
+                });
+            }
+
             updateModel(event, value, item);
         };
 
diff --git a/components/lib/multiselect/MultiSelectBase.js b/components/lib/multiselect/MultiSelectBase.js
index 7d614a4f42..46bbbcb783 100644
--- a/components/lib/multiselect/MultiSelectBase.js
+++ b/components/lib/multiselect/MultiSelectBase.js
@@ -239,6 +239,7 @@ export const MultiSelectBase = ComponentBase.extend({
         onFilter: null,
         onFocus: null,
         onHide: null,
+        onRemove: null,
         onSelectAll: null,
         onShow: null,
         optionDisabled: null,
diff --git a/components/lib/multiselect/multiselect.d.ts b/components/lib/multiselect/multiselect.d.ts
index d8f75a5615..273b31037e 100644
--- a/components/lib/multiselect/multiselect.d.ts
+++ b/components/lib/multiselect/multiselect.d.ts
@@ -320,6 +320,21 @@ interface MultiSelectChangeEvent {
     target: MultiSelectChangeTargetOptions;
 }
 
+/**
+ * Custom remove event when chip is removed.
+ * @event
+ */
+interface MultiSelectRemoveEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Removed item value
+     */
+    value: any;
+}
+
 /**
  * Custom filter event.
  * @see {@link MultiSelectProps.onFilter}
@@ -709,6 +724,11 @@ export interface MultiSelectProps extends Omit<React.DetailedHTMLProps<React.Inp
      * Callback to invoke when overlay panel becomes hidden.
      */
     onHide?(): void;
+    /**
+     * Callback to invoke when a chip is removed.
+     * @param {MultiSelectRemoveEvent} event - Custom remove event
+     */
+    onRemove?(event: MultiSelectRemoveEvent): void;
     /**
      * Callback to invoke when all data is selected.
      * @param {MultiSelectAllEvent} event - Custom select event.