From 75615f08de40c38599f72c32e78d8feb50b45e3d Mon Sep 17 00:00:00 2001
From: Nicholas Boll <nicholas.boll@gmail.com>
Date: Tue, 17 Dec 2024 12:04:32 -0700
Subject: [PATCH] fix(multi-select): Update selected state when pill is removed
 (#3076)

Update the `model.selected.items` when an item is unselected via the pills.

Fixes: [#3075](https://github.com/Workday/canvas-kit/issues/3075)

[category:Components]
---
 .../multi-select/lib/MultiSelectedList.tsx            |  4 ++--
 .../multi-select/lib/useMultiSelectModel.ts           | 11 +----------
 2 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/modules/preview-react/multi-select/lib/MultiSelectedList.tsx b/modules/preview-react/multi-select/lib/MultiSelectedList.tsx
index 671a9092d8..4818b871c1 100644
--- a/modules/preview-react/multi-select/lib/MultiSelectedList.tsx
+++ b/modules/preview-react/multi-select/lib/MultiSelectedList.tsx
@@ -10,7 +10,7 @@ export interface MultiSelectedListProps
   extends MultiSelectedItemProps,
     React.HTMLAttributes<HTMLDivElement> {}
 
-export const MultiSelectedList = createSubcomponent()({
+export const MultiSelectedList = createSubcomponent('div')({
   modelHook: useMultiSelectModel,
 })<MultiSelectedListProps>(({'aria-labelledby': ariaLabelledBy, removeLabel}, Element, model) => {
   return model.selected.state.items.length ? (
@@ -18,7 +18,7 @@ export const MultiSelectedList = createSubcomponent()({
       <div data-part="separator" />
       <ListBox
         model={model.selected}
-        as="div"
+        as={Element}
         role="listbox"
         aria-orientation="horizontal"
         aria-labelledby={ariaLabelledBy}
diff --git a/modules/preview-react/multi-select/lib/useMultiSelectModel.ts b/modules/preview-react/multi-select/lib/useMultiSelectModel.ts
index dc4a369028..c368c6ab33 100644
--- a/modules/preview-react/multi-select/lib/useMultiSelectModel.ts
+++ b/modules/preview-react/multi-select/lib/useMultiSelectModel.ts
@@ -66,19 +66,12 @@ export const useMultiSelectModel = createModelHook({
     orientation: 'horizontal',
     onRemove({id}) {
       model.events.select({id});
+      setSelectedItems(cachedSelected.filter(item => item.id !== id));
     },
     shouldVirtualize: false,
     items: model.state.visibility === 'hidden' ? cachedSelected : selectedItems,
   });
 
-  const state = {
-    ...model.state,
-  };
-
-  const events = {
-    ...model.events,
-  };
-
   return {
     selected: {
       ...selected,
@@ -94,7 +87,5 @@ export const useMultiSelectModel = createModelHook({
       },
     },
     ...model,
-    state,
-    events,
   };
 });