diff --git a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx
index b0a0fc23a1..5114acc101 100644
--- a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx
+++ b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx
@@ -5,6 +5,7 @@ import {
   MenuToggleElement,
   Select,
   SelectGroup,
+  SelectList,
   SelectOption,
   SelectOptionProps,
   TextInputGroup,
@@ -63,6 +64,15 @@ export const MultiselectFilterControl = <TItem,>({
   console.log("selectOptions", selectOptions);
   console.log("category.selectOptions", category.selectOptions);
 
+  const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(
+    null
+  );
+  // const [selected, setSelected] = React.useState<string[]>([]);
+
+  const [activeItem, setActiveItem] = React.useState<string | null>(null);
+  const textInputRef = React.useRef<HTMLInputElement>();
+  const [inputValue, setInputValue] = React.useState<string>("");
+
   const getOptionKeyFromOptionValue = (
     optionValue: string | SelectOptionProps
   ) => flatOptions.find((option) => option?.value === optionValue)?.key;
@@ -92,11 +102,14 @@ export const MultiselectFilterControl = <TItem,>({
 
   const onFilterClear = (chip: string | ToolbarChip) => {
     const chipKey = typeof chip === "string" ? chip : chip.key;
-    const optionKey = getOptionKeyFromChip(chipKey);
-    const newValue = filterValue
-      ? filterValue.filter((val) => val !== optionKey)
-      : [];
-    setFilterValue(newValue.length > 0 ? newValue : null);
+
+    // Directly compute the new state
+    const newFilterValue = filterValue
+      ? filterValue.filter((selection) => selection !== chipKey)
+      : filterValue;
+
+    // Pass the new state to setFilterValue
+    setFilterValue(newFilterValue);
   };
 
   // Select expects "selections" to be an array of the "value" props from the relevant optionProps
@@ -126,6 +139,27 @@ export const MultiselectFilterControl = <TItem,>({
     return chip;
   });
 
+  // // Updated chip creation logic
+
+  // const chips = filterValue.map((key, index) => {
+  //   const value = getOptionValueFromOptionKey(key) ?? "";
+  //   const idx = value.indexOf(CHIP_BREAK_DELINEATOR);
+
+  //   if (idx > 0) {
+  //     const tooltip = value.substring(0, idx);
+  //     const text = value.substring(idx + CHIP_BREAK_DELINEATOR.length);
+  //     return {
+  //       key: key,
+  //       node: (
+  //         <Tooltip id={`tooltip-chip-${index}`} content={<div>{tooltip}</div>}>
+  //           <div>{text}</div>
+  //         </Tooltip>
+  //       ),
+  //     } as ToolbarChip;
+  //   }
+  //   return value;
+  // });
+
   const renderSelectOptions = (
     filter: (option: FilterSelectOptionProps, groupName?: string) => boolean
   ) =>
@@ -153,8 +187,16 @@ export const MultiselectFilterControl = <TItem,>({
             return (
               <SelectOption
                 {...optionProps}
-                // key={optionProps.key}
-                key={`${index}-${optionProps.value}`}
+                {...(!optionProps.isDisabled && { hasCheckbox: true })}
+                key={optionProps.value || optionProps.children}
+                isFocused={focusedItemIndex === index}
+                id={`select-multi-typeahead-${optionProps.value.replace(
+                  " ",
+                  "-"
+                )}`}
+                ref={null}
+                isSelected={filterValue?.includes(optionProps.value)}
+
                 // isSelected={optionProps.value === filterValue}
               >
                 {optionProps.value}
@@ -202,29 +244,33 @@ export const MultiselectFilterControl = <TItem,>({
   //     </MenuToggle>
   //   );
   // };
-  const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(
-    null
-  );
-  const [selected, setSelected] = React.useState<string>("");
-  const [activeItem, setActiveItem] = React.useState<string | null>(null);
-  const textInputRef = React.useRef<HTMLInputElement>();
-  const [inputValue, setInputValue] = React.useState<string>("");
 
-  const onSelect = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
-    value: string | number | undefined
-  ) => {
-    // eslint-disable-next-line no-console
+  const onSelect = (value: string | undefined) => {
     console.log("selected", value);
 
     if (value && value !== "no results") {
-      setInputValue(value as string);
-      setFilterValue(null);
-      setSelected(value as string);
+      const newFilterValue = filterValue ? [...filterValue, value] : [value];
+      setFilterValue(newFilterValue);
+      // setSelected(
+      //   selected.includes(value)
+      //     ? selected.filter((selection) => selection !== value)
+      //     : [...selected, value]
+      // );
     }
-    setIsFilterDropdownOpen(false);
-    setFocusedItemIndex(null);
-    setActiveItem(null);
+
+    textInputRef.current?.focus();
+    // // eslint-disable-next-line no-console
+    // console.log("selected", value);
+
+    // if (value && value !== "no results") {
+    //   setInputValue(value as string);
+    //   setFilterValue(null);
+    //   setSelected(value as string);
+    // }
+    // setIsFilterDropdownOpen(false);
+    // setFocusedItemIndex(null);
+    // setActiveItem(null);
+    textInputRef.current?.focus();
   };
 
   const handleMenuArrowKeys = (key: string) => {
@@ -256,6 +302,45 @@ export const MultiselectFilterControl = <TItem,>({
       setActiveItem(`select-typeahead-${focusedItem.value.replace(" ", "-")}`);
     }
   };
+  React.useEffect(() => {
+    let newSelectOptions = Array.isArray(category.selectOptions)
+      ? category.selectOptions
+      : [];
+
+    // Filter menu items based on the text input value when one exists
+    if (inputValue) {
+      newSelectOptions = Array.isArray(category.selectOptions)
+        ? category.selectOptions?.filter((menuItem) => {
+            console.log("menuItem", menuItem);
+            console.log("inputValue", inputValue);
+            return String(menuItem.value)
+              .toLowerCase()
+              .includes(inputValue.toLowerCase());
+          })
+        : [];
+
+      // When no options are found after filtering, display 'No results found'
+      if (!newSelectOptions.length) {
+        newSelectOptions = [
+          {
+            key: "no results",
+            isDisabled: false,
+            children: `No results found for "${inputValue}"`,
+            value: "no results",
+          },
+        ];
+      }
+
+      // Open the menu when the input value changes and the new value is not empty
+      if (!isFilterDropdownOpen) {
+        setIsFilterDropdownOpen(true);
+      }
+    }
+
+    setSelectOptions(newSelectOptions);
+    setFocusedItemIndex(null);
+    setActiveItem(null);
+  }, [inputValue]);
 
   const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     const enabledMenuItems = Array.isArray(selectOptions)
@@ -269,6 +354,10 @@ export const MultiselectFilterControl = <TItem,>({
     const newSelectOptions = flatOptions.filter((menuItem) =>
       menuItem.value.toLowerCase().includes(inputValue.toLowerCase())
     );
+    const selectedItem =
+      newSelectOptions.find(
+        (option) => option.value.toLowerCase() === inputValue.toLowerCase()
+      ) || focusedItem;
     switch (event.key) {
       // Select the first available option
       case "Enter":
@@ -276,14 +365,57 @@ export const MultiselectFilterControl = <TItem,>({
         setSelectOptions(newSelectOptions); // Update the select options based on the filter
         setIsFilterDropdownOpen(true); // Optionally open the dropdown after filtering
 
+        // Determine the item to select based on input value or focused item
+
+        if (
+          isFilterDropdownOpen &&
+          selectedItem &&
+          selectedItem.value !== "no results"
+        ) {
+          setInputValue("");
+
+          // Add the value of the selected item to the filterValue
+          const newFilterValue = [
+            ...(filterValue || []),
+            getOptionValueFromOptionKey(selectedItem.value),
+          ];
+          setFilterValue(newFilterValue);
+          setIsFilterDropdownOpen(false);
+        }
+
+        // event.preventDefault();
+        // setSelectOptions(newSelectOptions); // Update the select options based on the filter
+        // setIsFilterDropdownOpen(true); // Optionally open the dropdown after filtering
+
+        // if (
+        //   isFilterDropdownOpen &&
+        //   focusedItem &&
+        //   focusedItem?.value !== "no results"
+        // ) {
+        //   // setInputValue(String(focusedItem.children));
+        //   setInputValue("");
+
+        //   // Add the value of the focused item to the filterValue
+        //   const newFilterValue = [
+        //     ...(filterValue || []),
+        //     getOptionValueFromOptionKey(focusedItem.value),
+        //   ];
+        //   setFilterValue(newFilterValue); // Update the filter value with the new selection
+
+        //   setIsFilterDropdownOpen(false);
+        // }
+        // event.preventDefault();
+        // setSelectOptions(newSelectOptions); // Update the select options based on the filter
+        // setIsFilterDropdownOpen(true); // Optionally open the dropdown after filtering
+
         // if (
         //   isFilterDropdownOpen &&
         //   focusedItem &&
         //   focusedItem?.value !== "no results"
         // ) {
         //   setInputValue(String(focusedItem.children));
-        //   setFilterValue(null);
-        //   setSelected(String(focusedItem.children));
+        //   // setFilterValue()
+        //   // setSelected(String(focusedItem.children));
         //   setIsFilterDropdownOpen(false);
         // }
 
@@ -380,7 +512,7 @@ export const MultiselectFilterControl = <TItem,>({
             <Button
               variant="plain"
               onClick={() => {
-                setSelected("");
+                // setSelected([]);
                 setInputValue("");
                 setFilterValue(null);
                 textInputRef?.current?.focus();
@@ -409,10 +541,13 @@ export const MultiselectFilterControl = <TItem,>({
         toggle={toggle}
         selected={filterValue}
         onOpenChange={(isOpen) => setIsFilterDropdownOpen(isOpen)}
-        onSelect={(_, value) => onFilterSelect(value as string)}
+        // onSelect={(_, value) => onFilterSelect(value as string)}
+        onSelect={(ev, selection) => onSelect(selection as string)}
         isOpen={isFilterDropdownOpen}
       >
-        {renderSelectOptions(() => true)}
+        <SelectList id="select-multi-typeahead-checkbox-listbox">
+          {renderSelectOptions(() => true)}
+        </SelectList>
       </Select>
     </ToolbarFilter>
   );