fix(multi-select): Update selected state when pill is removed

Workday · Dec 17, 2024 · 8943a2b · 8943a2b
1 parent 49c3b36
commit 8943a2b
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 12 deletions.
diff --git a/modules/preview-react/multi-select/lib/MultiSelectedList.tsx b/modules/preview-react/multi-select/lib/MultiSelectedList.tsx
@@ -10,15 +10,15 @@ 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 ? (
     <>
       <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
@@ -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,
   };
 });