diff --git a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx
index 9e82e336a5..f91046e577 100644
--- a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx
+++ b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx
@@ -8,7 +8,6 @@ import {
   SelectGroup,
   SelectList,
   SelectOption,
-  SelectOptionProps,
   TextInputGroup,
   TextInputGroupMain,
   TextInputGroupUtilities,
@@ -49,13 +48,25 @@ export const MultiselectFilterControl = <TItem,>({
   const [selectOptions, setSelectOptions] = React.useState<
     FilterSelectOptionProps[]
   >(Array.isArray(category.selectOptions) ? category.selectOptions : []);
+
   const hasGroupings = !Array.isArray(selectOptions);
+
   const flatOptions: FilterSelectOptionProps[] = !hasGroupings
     ? selectOptions
     : (Object.values(selectOptions).flatMap(
         (i) => i
       ) as FilterSelectOptionProps[]);
 
+  const getOptionKeyFromOptionValue = (optionValue: string) =>
+    flatOptions.find(({ value }) => value === optionValue)?.key;
+
+  const getOptionValueFromOptionKey = (optionKey: string) =>
+    flatOptions.find(({ key }) => key === optionKey)?.value;
+
+  const getOptionKeyFromChip = (chipDisplayValue: string) => {
+    return flatOptions.find(({ value }) => value === chipDisplayValue)?.key;
+  };
+
   React.useEffect(() => {
     if (Array.isArray(category.selectOptions)) {
       setSelectOptions(category.selectOptions);
@@ -70,32 +81,24 @@ export const MultiselectFilterControl = <TItem,>({
   const textInputRef = React.useRef<HTMLInputElement>();
   const [inputValue, setInputValue] = React.useState<string>("");
 
-  const getOptionKeyFromOptionValue = (
-    optionValue: string | SelectOptionProps
-  ) => flatOptions.find((option) => option?.value === optionValue)?.key;
-
-  const getOptionValueFromOptionKey = (optionKey: string) =>
-    flatOptions.find(({ key }) => key === optionKey)?.value;
-
   const onFilterClear = (chip: string | ToolbarChip) => {
-    const chipKey = typeof chip === "string" ? chip : chip.key;
-    const newFilterValue = filterValue
-      ? filterValue.filter((selection) => selection !== chipKey)
-      : filterValue;
+    const displayValue = typeof chip === "string" ? chip : chip.key;
+    const optionKey = getOptionKeyFromChip(displayValue);
 
-    setFilterValue(newFilterValue);
+    if (optionKey) {
+      const newValue = filterValue?.filter((val) => val !== optionKey) ?? [];
+      setFilterValue(newValue.length > 0 ? newValue : null);
+    }
   };
 
-  // Select expects "selections" to be an array of the "value" props from the relevant optionProps
-  const selections = filterValue?.map(getOptionValueFromOptionKey) ?? [];
-
   /*
    * Note: Chips can be a `ToolbarChip` or a plain `string`.  Use a hack to split a
    *       selected option in 2 parts.  Assuming the option is in the format "Group / Item"
    *       break the text and show a chip with the Item and the Group as a tooltip.
    */
-  const chips = selections.map((s, index) => {
-    const chip: string = s?.toString() ?? "";
+  const chips = filterValue?.map((s, index) => {
+    const displayValue = getOptionValueFromOptionKey(s);
+    const chip: string = displayValue?.toString() ?? "";
     const idx = chip.indexOf(CHIP_BREAK_DELINEATOR);
 
     if (idx > 0) {
@@ -113,6 +116,8 @@ export const MultiselectFilterControl = <TItem,>({
     return chip;
   });
 
+  console.log({ chips, filterValue });
+
   const renderSelectOptions = (
     filter: (option: FilterSelectOptionProps, groupName?: string) => boolean
   ) =>
@@ -124,40 +129,64 @@ export const MultiselectFilterControl = <TItem,>({
           .map(([group, options], index) => {
             const groupFiltered =
               options?.filter((o) => filter(o, group)) ?? [];
-            return groupFiltered.length == 0 ? undefined : (
+            return groupFiltered.length === 0 ? undefined : (
               <SelectGroup key={`group-${index}`} label={group}>
-                {groupFiltered.map((optionProps) => (
-                  <SelectOption {...optionProps} key={optionProps.key} />
-                ))}
+                {groupFiltered.map((optionProps) => {
+                  const optionKey = getOptionKeyFromOptionValue(
+                    optionProps.value
+                  );
+                  if (!optionKey) return null;
+                  return (
+                    <SelectOption
+                      {...optionProps}
+                      key={optionProps.key}
+                      isSelected={filterValue?.includes(optionKey)}
+                    />
+                  );
+                })}
               </SelectGroup>
             );
           })
           .filter(Boolean)
       : flatOptions
           .filter((o) => filter(o))
-          .map((optionProps, index) => (
-            <SelectOption
-              {...optionProps}
-              {...(!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)}
-            >
-              {optionProps.value}
-            </SelectOption>
-          ));
+          .map((optionProps, index) => {
+            const optionKey = getOptionKeyFromOptionValue(optionProps.value);
+            if (!optionKey) return null;
+            return (
+              <SelectOption
+                {...optionProps}
+                {...(!optionProps.isDisabled && { hasCheckbox: true })}
+                key={optionProps.value || optionProps.children}
+                value={optionProps.value}
+                isFocused={focusedItemIndex === index}
+                isSelected={filterValue?.includes(optionKey)}
+              >
+                {optionProps.value}
+              </SelectOption>
+            );
+          });
 
   const onSelect = (value: string | undefined) => {
     if (value && value !== "No results") {
-      const newFilterValue = filterValue ? [...filterValue, value] : [value];
-      setFilterValue(newFilterValue);
+      const optionKey = getOptionKeyFromOptionValue(value);
+
+      if (optionKey) {
+        let newFilterValue: string[];
+
+        if (filterValue && filterValue.includes(optionKey)) {
+          newFilterValue = filterValue.filter((item) => item !== optionKey);
+        } else {
+          newFilterValue = filterValue
+            ? [...filterValue, optionKey]
+            : [optionKey];
+        }
+
+        setFilterValue(newFilterValue);
+      }
     }
 
+    // Ensure focus remains on the input field
     textInputRef.current?.focus();
   };
 
@@ -205,7 +234,7 @@ export const MultiselectFilterControl = <TItem,>({
         newSelectOptions = [
           {
             key: "no-results",
-            isDisabled: true,
+            isDisabled: false,
             children: `No results found for "${inputValue}"`,
             value: "No results",
           },
@@ -245,27 +274,11 @@ export const MultiselectFilterControl = <TItem,>({
         setSelectOptions(newSelectOptions);
         setIsFilterDropdownOpen(true);
 
-        if (
-          isFilterDropdownOpen &&
-          selectedItem &&
-          selectedItem.value !== "no results"
-        ) {
-          setInputValue("");
-
-          const newFilterValue = [...(filterValue || [])];
-          const optionValue = getOptionValueFromOptionKey(selectedItem.value);
-
-          if (newFilterValue.includes(optionValue)) {
-            const indexToRemove = newFilterValue.indexOf(optionValue);
-            newFilterValue.splice(indexToRemove, 1);
-          } else {
-            newFilterValue.push(optionValue);
-          }
-
-          setFilterValue(newFilterValue);
-          setIsFilterDropdownOpen(false);
+        if (!isFilterDropdownOpen) {
+          setIsFilterDropdownOpen((prev) => !prev);
+        } else if (selectedItem && selectedItem.value !== "No results") {
+          onSelect(selectedItem.value);
         }
-
         break;
       case "Tab":
       case "Escape":
@@ -295,6 +308,7 @@ export const MultiselectFilterControl = <TItem,>({
         setIsFilterDropdownOpen(!isFilterDropdownOpen);
       }}
       isExpanded={isFilterDropdownOpen}
+      isDisabled={isDisabled || !category.selectOptions.length}
       isFullWidth
     >
       <TextInputGroup isPlain>
diff --git a/client/src/app/components/FilterToolbar/SelectFilterControl.tsx b/client/src/app/components/FilterToolbar/SelectFilterControl.tsx
index e8b6479dda..4246d6eccb 100644
--- a/client/src/app/components/FilterToolbar/SelectFilterControl.tsx
+++ b/client/src/app/components/FilterToolbar/SelectFilterControl.tsx
@@ -34,46 +34,18 @@ export const SelectFilterControl = <TItem, TFilterCategoryKey extends string>({
 >): JSX.Element | null => {
   const [isFilterDropdownOpen, setIsFilterDropdownOpen] = React.useState(false);
 
-  const getChipFromOptionValue = (
-    optionValue: SelectOptionProps | undefined
-  ) => {
-    return optionValue ? optionValue.value : "";
-  };
-
-  const getOptionKeyFromChip = (chip: string) =>
-    category.selectOptions.find(
-      (optionProps) => optionProps.value.toString() === chip
-    )?.key;
-
-  const getOptionValueFromOptionKey = (
-    optionKey: string
-  ): SelectOptionProps => {
-    return (
-      category.selectOptions.find((optionProps) => {
-        return optionProps.value === optionKey;
-      }) || { value: "", children: "", key: "" }
-    );
-  };
-
   const onFilterSelect = (value: string) => {
     setFilterValue(value ? [value] : null);
     setIsFilterDropdownOpen(false);
   };
 
+  const chips = filterValue ? filterValue : [];
+
   const onFilterClear = (chip: string) => {
-    const optionKey = getOptionKeyFromChip(chip);
-    const newValue = filterValue
-      ? filterValue.filter((val) => val !== optionKey)
-      : [];
-    setFilterValue(newValue.length > 0 ? newValue : null);
+    const newValue = filterValue?.filter((val) => val !== chip);
+    setFilterValue(newValue?.length ? newValue : null);
   };
 
-  const selections: SelectOptionProps[] = filterValue
-    ? filterValue.map(getOptionValueFromOptionKey)
-    : [];
-
-  const chips = selections ? selections.map(getChipFromOptionValue) : [];
-
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => {
     return (
       <MenuToggle
@@ -116,11 +88,7 @@ export const SelectFilterControl = <TItem, TFilterCategoryKey extends string>({
         <SelectList>
           {category.selectOptions.map((o: SelectOptionProps, index) => {
             return (
-              <SelectOption
-                key={`${index}-${o.value}`}
-                isSelected={o.value == filterValue}
-                {...o}
-              >
+              <SelectOption {...o} key={`${index}-${o.value}`}>
                 {o.value}
               </SelectOption>
             );