Fix #5247: Multiselect onRemove event (#5248)

primefaces · Nov 6, 2023 · 0091ad3 · 0091ad3
1 parent bf9b11c
commit 0091ad3
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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.