diff --git a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx
index 627faa55f..9e82e336a 100644
--- a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx
+++ b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx
@@ -1,19 +1,28 @@
 import * as React from "react";
-import { ToolbarChip, ToolbarFilter, Tooltip } from "@patternfly/react-core";
 import {
+  Badge,
+  Button,
+  MenuToggle,
+  MenuToggleElement,
   Select,
-  SelectOption,
-  SelectOptionObject,
-  SelectVariant,
-  SelectProps,
   SelectGroup,
-} from "@patternfly/react-core/deprecated";
+  SelectList,
+  SelectOption,
+  SelectOptionProps,
+  TextInputGroup,
+  TextInputGroupMain,
+  TextInputGroupUtilities,
+  ToolbarChip,
+  ToolbarFilter,
+  Tooltip,
+} from "@patternfly/react-core";
 import { IFilterControlProps } from "./FilterControl";
 import {
   IMultiselectFilterCategory,
   FilterSelectOptionProps,
 } from "./FilterToolbar";
 import { css } from "@patternfly/react-styles";
+import { TimesIcon } from "@patternfly/react-icons";
 
 import "./select-overrides.css";
 
@@ -37,46 +46,44 @@ export const MultiselectFilterControl = <TItem,>({
 >): JSX.Element | null => {
   const [isFilterDropdownOpen, setIsFilterDropdownOpen] = React.useState(false);
 
-  const { selectOptions } = category;
+  const [selectOptions, setSelectOptions] = React.useState<
+    FilterSelectOptionProps[]
+  >(Array.isArray(category.selectOptions) ? category.selectOptions : []);
   const hasGroupings = !Array.isArray(selectOptions);
-  const flatOptions = !hasGroupings
+  const flatOptions: FilterSelectOptionProps[] = !hasGroupings
     ? selectOptions
-    : Object.values(selectOptions).flatMap((i) => i);
+    : (Object.values(selectOptions).flatMap(
+        (i) => i
+      ) as FilterSelectOptionProps[]);
 
-  const getOptionKeyFromOptionValue = (
-    optionValue: string | SelectOptionObject
-  ) => flatOptions.find(({ value }) => value === optionValue)?.key;
+  React.useEffect(() => {
+    if (Array.isArray(category.selectOptions)) {
+      setSelectOptions(category.selectOptions);
+    }
+  }, [category.selectOptions]);
 
-  const getOptionKeyFromChip = (chip: string) =>
-    flatOptions.find(({ value }) => value.toString() === chip)?.key;
+  const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(
+    null
+  );
+
+  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;
 
   const getOptionValueFromOptionKey = (optionKey: string) =>
     flatOptions.find(({ key }) => key === optionKey)?.value;
 
-  const onFilterSelect = (value: string | SelectOptionObject) => {
-    const optionKey = getOptionKeyFromOptionValue(value);
-    if (optionKey && filterValue?.includes(optionKey)) {
-      const updatedValues = filterValue.filter(
-        (item: string) => item !== optionKey
-      );
-      setFilterValue(updatedValues);
-    } else {
-      if (filterValue) {
-        const updatedValues = [...filterValue, optionKey];
-        setFilterValue(updatedValues as string[]);
-      } else {
-        setFilterValue([optionKey || ""]);
-      }
-    }
-  };
-
   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);
+    const newFilterValue = filterValue
+      ? filterValue.filter((selection) => selection !== chipKey)
+      : filterValue;
+
+    setFilterValue(newFilterValue);
   };
 
   // Select expects "selections" to be an array of the "value" props from the relevant optionProps
@@ -110,7 +117,9 @@ export const MultiselectFilterControl = <TItem,>({
     filter: (option: FilterSelectOptionProps, groupName?: string) => boolean
   ) =>
     hasGroupings
-      ? Object.entries(selectOptions)
+      ? Object.entries(
+          selectOptions as Record<string, FilterSelectOptionProps[]>
+        )
           .sort(([groupA], [groupB]) => groupA.localeCompare(groupB))
           .map(([group, options], index) => {
             const groupFiltered =
@@ -126,26 +135,207 @@ export const MultiselectFilterControl = <TItem,>({
           .filter(Boolean)
       : flatOptions
           .filter((o) => filter(o))
-          .map((optionProps) => (
-            <SelectOption {...optionProps} key={optionProps.key} />
+          .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>
           ));
 
-  /**
-   * Render options (with categories if available) where the option value OR key includes
-   * the filterInput.
-   */
-  const onOptionsFilter: SelectProps["onFilter"] = (_event, textInput) => {
-    const input = textInput?.toLowerCase();
-
-    return renderSelectOptions((optionProps, groupName) => {
-      // TODO: Checking for a filter match against the key or the value may not be desirable.
-      return (
-        groupName?.toLowerCase().includes(input) ||
-        optionProps?.key?.toLowerCase().includes(input) ||
-        optionProps?.value?.toString().toLowerCase().includes(input)
-      );
-    });
+  const onSelect = (value: string | undefined) => {
+    if (value && value !== "No results") {
+      const newFilterValue = filterValue ? [...filterValue, value] : [value];
+      setFilterValue(newFilterValue);
+    }
+
+    textInputRef.current?.focus();
+  };
+
+  const handleMenuArrowKeys = (key: string) => {
+    if (isFilterDropdownOpen && Array.isArray(selectOptions)) {
+      let indexToFocus: number = focusedItemIndex ?? -1;
+
+      if (key === "ArrowUp") {
+        indexToFocus =
+          indexToFocus <= 0 ? selectOptions.length - 1 : indexToFocus - 1;
+      } else if (key === "ArrowDown") {
+        indexToFocus =
+          indexToFocus >= selectOptions.length - 1 ? 0 : indexToFocus + 1;
+      }
+
+      while (selectOptions[indexToFocus].isDisabled) {
+        indexToFocus = key === "ArrowUp" ? indexToFocus - 1 : indexToFocus + 1;
+        if (indexToFocus < 0) {
+          indexToFocus = selectOptions.length - 1;
+        } else if (indexToFocus >= selectOptions.length) {
+          indexToFocus = 0;
+        }
+      }
+
+      setFocusedItemIndex(indexToFocus);
+      const focusedItem = selectOptions[indexToFocus];
+      setActiveItem(`select-typeahead-${focusedItem.value.replace(" ", "-")}`);
+    }
   };
+  React.useEffect(() => {
+    let newSelectOptions = Array.isArray(category.selectOptions)
+      ? category.selectOptions
+      : [];
+
+    if (inputValue) {
+      newSelectOptions = Array.isArray(category.selectOptions)
+        ? category.selectOptions?.filter((menuItem) =>
+            String(menuItem.value)
+              .toLowerCase()
+              .includes(inputValue.toLowerCase())
+          )
+        : [];
+
+      if (!newSelectOptions.length) {
+        newSelectOptions = [
+          {
+            key: "no-results",
+            isDisabled: true,
+            children: `No results found for "${inputValue}"`,
+            value: "No results",
+          },
+        ];
+      }
+
+      if (!isFilterDropdownOpen) {
+        setIsFilterDropdownOpen(true);
+      }
+    }
+
+    setSelectOptions(newSelectOptions);
+    setFocusedItemIndex(null);
+    setActiveItem(null);
+  }, [inputValue, isFilterDropdownOpen, category.selectOptions]);
+
+  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const enabledMenuItems = Array.isArray(selectOptions)
+      ? selectOptions.filter((option) => !option.isDisabled)
+      : [];
+    const [firstMenuItem] = enabledMenuItems;
+    const focusedItem = focusedItemIndex
+      ? enabledMenuItems[focusedItemIndex]
+      : firstMenuItem;
+
+    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) {
+      case "Enter":
+        event.preventDefault();
+        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);
+        }
+
+        break;
+      case "Tab":
+      case "Escape":
+        setIsFilterDropdownOpen(false);
+        setActiveItem(null);
+        break;
+      case "ArrowUp":
+      case "ArrowDown":
+        event.preventDefault();
+        handleMenuArrowKeys(event.key);
+        break;
+    }
+  };
+
+  const onTextInputChange = (
+    _event: React.FormEvent<HTMLInputElement>,
+    value: string
+  ) => {
+    setInputValue(value);
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      variant="typeahead"
+      onClick={() => {
+        setIsFilterDropdownOpen(!isFilterDropdownOpen);
+      }}
+      isExpanded={isFilterDropdownOpen}
+      isFullWidth
+    >
+      <TextInputGroup isPlain>
+        <TextInputGroupMain
+          value={inputValue}
+          onClick={() => {
+            setIsFilterDropdownOpen(!isFilterDropdownOpen);
+          }}
+          onChange={onTextInputChange}
+          onKeyDown={onInputKeyDown}
+          id="typeahead-select-input"
+          autoComplete="off"
+          innerRef={textInputRef}
+          placeholder={category.placeholderText}
+          {...(activeItem && { "aria-activedescendant": activeItem })}
+          role="combobox"
+          isExpanded={isFilterDropdownOpen}
+          aria-controls="select-typeahead-listbox"
+        />
+
+        <TextInputGroupUtilities>
+          {!!inputValue && (
+            <Button
+              variant="plain"
+              onClick={() => {
+                setInputValue("");
+                setFilterValue(null);
+                textInputRef?.current?.focus();
+              }}
+              aria-label="Clear input value"
+            >
+              <TimesIcon aria-hidden />
+            </Button>
+          )}
+          {filterValue?.length ? (
+            <Badge isRead>{filterValue.length}</Badge>
+          ) : null}
+        </TextInputGroupUtilities>
+      </TextInputGroup>
+    </MenuToggle>
+  );
 
   return (
     <ToolbarFilter
@@ -158,18 +348,15 @@ export const MultiselectFilterControl = <TItem,>({
       <Select
         className={css(isScrollable && "isScrollable")}
         aria-label={category.title}
-        toggleId={`${category.key}-filter-value-select`}
-        onToggle={() => setIsFilterDropdownOpen(!isFilterDropdownOpen)}
-        selections={selections || []}
-        onSelect={(_, value) => onFilterSelect(value)}
+        toggle={toggle}
+        selected={filterValue}
+        onOpenChange={(isOpen) => setIsFilterDropdownOpen(isOpen)}
+        onSelect={(_, selection) => onSelect(selection as string)}
         isOpen={isFilterDropdownOpen}
-        placeholderText={category.placeholderText}
-        isDisabled={isDisabled || category.selectOptions.length === 0}
-        variant={SelectVariant.checkbox}
-        hasInlineFilter
-        onFilter={onOptionsFilter}
       >
-        {renderSelectOptions(() => true)}
+        <SelectList id="select-multi-typeahead-checkbox-listbox">
+          {renderSelectOptions(() => true)}
+        </SelectList>
       </Select>
     </ToolbarFilter>
   );
diff --git a/client/src/app/components/FilterToolbar/SelectFilterControl.tsx b/client/src/app/components/FilterToolbar/SelectFilterControl.tsx
index 3e0ed1abb..e8b6479dd 100644
--- a/client/src/app/components/FilterToolbar/SelectFilterControl.tsx
+++ b/client/src/app/components/FilterToolbar/SelectFilterControl.tsx
@@ -1,15 +1,15 @@
 import * as React from "react";
-import { ToolbarFilter } from "@patternfly/react-core";
 import {
+  MenuToggle,
+  MenuToggleElement,
   Select,
+  SelectList,
   SelectOption,
-  SelectOptionObject,
-} from "@patternfly/react-core/deprecated";
+  SelectOptionProps,
+  ToolbarFilter,
+} from "@patternfly/react-core";
 import { IFilterControlProps } from "./FilterControl";
-import {
-  ISelectFilterCategory,
-  FilterSelectOptionProps,
-} from "./FilterToolbar";
+import { ISelectFilterCategory } from "./FilterToolbar";
 import { css } from "@patternfly/react-styles";
 
 import "./select-overrides.css";
@@ -34,29 +34,29 @@ export const SelectFilterControl = <TItem, TFilterCategoryKey extends string>({
 >): JSX.Element | null => {
   const [isFilterDropdownOpen, setIsFilterDropdownOpen] = React.useState(false);
 
-  const getOptionKeyFromOptionValue = (
-    optionValue: string | SelectOptionObject
-  ) =>
-    category.selectOptions.find(
-      (optionProps) => optionProps.value === optionValue
-    )?.key;
-
   const getChipFromOptionValue = (
-    optionValue: string | SelectOptionObject | undefined
-  ) => (optionValue ? optionValue.toString() : "");
+    optionValue: SelectOptionProps | undefined
+  ) => {
+    return optionValue ? optionValue.value : "";
+  };
 
   const getOptionKeyFromChip = (chip: string) =>
     category.selectOptions.find(
       (optionProps) => optionProps.value.toString() === chip
     )?.key;
 
-  const getOptionValueFromOptionKey = (optionKey: string) =>
-    category.selectOptions.find((optionProps) => optionProps.key === optionKey)
-      ?.value;
+  const getOptionValueFromOptionKey = (
+    optionKey: string
+  ): SelectOptionProps => {
+    return (
+      category.selectOptions.find((optionProps) => {
+        return optionProps.value === optionKey;
+      }) || { value: "", children: "", key: "" }
+    );
+  };
 
-  const onFilterSelect = (value: string | SelectOptionObject) => {
-    const optionKey = getOptionKeyFromOptionValue(value);
-    setFilterValue(optionKey ? [optionKey] : null);
+  const onFilterSelect = (value: string) => {
+    setFilterValue(value ? [value] : null);
     setIsFilterDropdownOpen(false);
   };
 
@@ -68,17 +68,29 @@ export const SelectFilterControl = <TItem, TFilterCategoryKey extends string>({
     setFilterValue(newValue.length > 0 ? newValue : null);
   };
 
-  // Select expects "selections" to be an array of the "value" props from the relevant optionProps
-  const selections = filterValue
+  const selections: SelectOptionProps[] = filterValue
     ? filterValue.map(getOptionValueFromOptionKey)
-    : null;
+    : [];
 
   const chips = selections ? selections.map(getChipFromOptionValue) : [];
 
-  const renderSelectOptions = (options: FilterSelectOptionProps[]) =>
-    options.map((optionProps) => (
-      <SelectOption {...optionProps} key={optionProps.key} />
-    ));
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => {
+    return (
+      <MenuToggle
+        aria-label={"Select"}
+        id={"select-filter-value-select"}
+        isFullWidth
+        ref={toggleRef}
+        onClick={() => {
+          setIsFilterDropdownOpen(!isFilterDropdownOpen);
+        }}
+        isExpanded={isFilterDropdownOpen}
+        isDisabled={isDisabled || category.selectOptions.length === 0}
+      >
+        {filterValue || "Any"}
+      </MenuToggle>
+    );
+  };
 
   return (
     <ToolbarFilter
@@ -91,15 +103,29 @@ export const SelectFilterControl = <TItem, TFilterCategoryKey extends string>({
       <Select
         className={css(isScrollable && "isScrollable")}
         aria-label={category.title}
-        toggleId={`${category.key}-filter-value-select`}
-        onToggle={() => setIsFilterDropdownOpen(!isFilterDropdownOpen)}
-        selections={selections || []}
-        onSelect={(_, value) => onFilterSelect(value)}
+        toggle={toggle}
+        onOpenChange={(isOpen) => setIsFilterDropdownOpen(isOpen)}
+        selected={filterValue}
+        onSelect={(_, value) => {
+          onFilterSelect(value as string);
+          setIsFilterDropdownOpen(false);
+        }}
         isOpen={isFilterDropdownOpen}
-        placeholderText="Any"
-        isDisabled={isDisabled || category.selectOptions.length === 0}
+        placeholder="Any"
       >
-        {renderSelectOptions(category.selectOptions)}
+        <SelectList>
+          {category.selectOptions.map((o: SelectOptionProps, index) => {
+            return (
+              <SelectOption
+                key={`${index}-${o.value}`}
+                isSelected={o.value == filterValue}
+                {...o}
+              >
+                {o.value}
+              </SelectOption>
+            );
+          })}
+        </SelectList>
       </Select>
     </ToolbarFilter>
   );