From 523c1ab716c666feeca4636b844cf195810e4ac2 Mon Sep 17 00:00:00 2001
From: Jason Gill <jason.gill@ethyca.com>
Date: Fri, 15 Nov 2024 14:15:52 -0700
Subject: [PATCH] Migrate one-off Select inputs to Ant (#5475)

---
 CHANGELOG.md                                  |   3 +
 clients/admin-ui/cypress/e2e/connectors.cy.ts |   7 +-
 .../cypress/e2e/discovery-detection.cy.ts     |  15 +-
 clients/admin-ui/cypress/e2e/messaging.cy.ts  |  16 +-
 .../cypress/e2e/privacy-experiences.cy.ts     |  32 +--
 .../cypress/e2e/privacy-notices.cy.ts         |  16 +-
 .../e2e/system-integrations-plus.cy.ts        |  22 +-
 .../admin-ui/cypress/support/ant-support.ts   |  62 +++++
 clients/admin-ui/cypress/support/e2e.ts       |   1 +
 .../src/features/common/ScrollableList.tsx    |  26 +-
 .../src/features/common/TaxonomiesPicker.tsx  |  20 +-
 .../features/common/dropdown/FilterSelect.tsx |  16 ++
 .../dropdown/TaxonomySelect.module.scss       |  17 ++
 .../common/dropdown/TaxonomySelect.tsx        |  82 ++++++
 .../dropdown/TaxonomySelectDropdown.tsx       | 119 --------
 .../src/features/common/hooks/index.ts        |   1 -
 .../features/common/hooks/useOutsideClick.ts  |  22 --
 .../common/hooks/useTaxonomies.test.ts        |   6 +-
 .../features/common/hooks/useTaxonomies.tsx   |  71 +++--
 .../tables/cells/EditCategoryCell.tsx         |  27 +-
 .../datamap/modals/ReportExportModal.tsx      |  23 +-
 .../add-connection/DatasetConfiguration.tsx   | 104 ++++---
 .../add-connection/forms/YamlEditorForm.tsx   |   5 +-
 .../filters/ConnectionTypeFilter.tsx          |  24 +-
 .../filters/DisabledStatusFilter.tsx          |  24 +-
 .../filters/SystemTypeFilter.tsx              |  24 +-
 .../filters/TestingStatusFilter.tsx           |  24 +-
 .../ConsentAutomationForm.tsx                 |  42 +--
 .../forms/SelectDataset.tsx                   |  19 +-
 .../AddMessagingTemplateModal.tsx             |  13 +-
 .../privacy-notices/PrivacyNoticeForm.tsx     |  34 +--
 .../PrivacyNoticeTranslationForm.tsx          |  37 ++-
 .../features/system/SystemInformationForm.tsx |   9 +-
 .../src/features/system/VendorSelector.tsx    |   1 +
 .../dictionary-form/DictSuggestionInputs.tsx  | 256 +++---------------
 .../src/pages/datastore-connection/[id].tsx   |  10 +-
 clients/fidesui/src/hoc/CustomSelect.tsx      |  19 ++
 clients/fidesui/src/hoc/index.tsx             |   1 +
 clients/fidesui/src/index.ts                  |  47 ++--
 39 files changed, 567 insertions(+), 730 deletions(-)
 create mode 100644 clients/admin-ui/cypress/support/ant-support.ts
 create mode 100644 clients/admin-ui/src/features/common/dropdown/FilterSelect.tsx
 create mode 100644 clients/admin-ui/src/features/common/dropdown/TaxonomySelect.module.scss
 create mode 100644 clients/admin-ui/src/features/common/dropdown/TaxonomySelect.tsx
 delete mode 100644 clients/admin-ui/src/features/common/dropdown/TaxonomySelectDropdown.tsx
 delete mode 100644 clients/admin-ui/src/features/common/hooks/useOutsideClick.ts
 create mode 100644 clients/fidesui/src/hoc/CustomSelect.tsx
 create mode 100644 clients/fidesui/src/hoc/index.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 00816fca25..d133eeeae8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,9 @@ The types of changes are:
 ### Added
 - Added namespace support for Snowflake [#5486](https://github.com/ethyca/fides/pull/5486)
 
+### Developer Experience
+- Migrated several instances of Chakra's Select component to use Ant's Select component [#5475](https://github.com/ethyca/fides/pull/5475)
+
 ### Fixed
 - Fixed deletion of ConnectionConfigs that have related MonitorConfigs [#5478](https://github.com/ethyca/fides/pull/5478)
 
diff --git a/clients/admin-ui/cypress/e2e/connectors.cy.ts b/clients/admin-ui/cypress/e2e/connectors.cy.ts
index aad20f189d..10f4472f83 100644
--- a/clients/admin-ui/cypress/e2e/connectors.cy.ts
+++ b/clients/admin-ui/cypress/e2e/connectors.cy.ts
@@ -65,12 +65,13 @@ describe("Connectors", () => {
       // The dataset dropdown selector should have the value of the existing connected dataset
       cy.getByTestId("save-dataset-link-btn").should("be.enabled");
       cy.getByTestId("dataset-selector").should(
-        "have.value",
+        "have.text",
         "postgres_example_test_dataset",
       );
 
       // Change the linked dataset
-      cy.getByTestId("dataset-selector").select("demo_users_dataset_2");
+      cy.getByTestId("dataset-selector").antSelect("demo_users_dataset_2");
+
       cy.getByTestId("save-dataset-link-btn").click();
 
       cy.wait("@patchDatasetconfig").then((interception) => {
@@ -95,7 +96,7 @@ describe("Connectors", () => {
       cy.wait("@getPostgresConnectorDatasetconfig");
 
       // Unset the linked dataset, which should switch the save button enable-ness
-      cy.getByTestId("dataset-selector").select("Select");
+      cy.getByTestId("dataset-selector").antClearSelect();
       cy.getByTestId("save-dataset-link-btn").should("be.disabled");
       // The monaco yaml editor takes a bit to load
       // eslint-disable-next-line cypress/no-unnecessary-waiting
diff --git a/clients/admin-ui/cypress/e2e/discovery-detection.cy.ts b/clients/admin-ui/cypress/e2e/discovery-detection.cy.ts
index 74cf1ec336..ca8ad8bd4d 100644
--- a/clients/admin-ui/cypress/e2e/discovery-detection.cy.ts
+++ b/clients/admin-ui/cypress/e2e/discovery-detection.cy.ts
@@ -389,19 +389,14 @@ describe("discovery and detection", () => {
       });
 
       it("allows classifications to be changed using the dropdown", () => {
-        cy.intercept("GET", "/api/v1/data_category", [
-          { fides_key: "system", active: true },
-          { fides_key: "user.contact", active: true },
-        ]);
-        cy.intercept("PATCH", "/api/v1/plus/discovery-monitor/*/results", {
-          response: 200,
-        }).as("patchClassification");
+        stubTaxonomyEntities();
+        cy.intercept("PATCH", "/api/v1/plus/discovery-monitor/*/results").as(
+          "patchClassification",
+        );
         cy.getByTestId("classification-user.device.device_id").click({
           force: true,
         });
-        cy.get(".select-wrapper").within(() => {
-          cy.getByTestId("option-system").click({ force: true });
-        });
+        cy.getByTestId("taxonomy-select").antSelect("system");
         cy.wait("@patchClassification");
       });
 
diff --git a/clients/admin-ui/cypress/e2e/messaging.cy.ts b/clients/admin-ui/cypress/e2e/messaging.cy.ts
index 908336db85..46e2abd292 100644
--- a/clients/admin-ui/cypress/e2e/messaging.cy.ts
+++ b/clients/admin-ui/cypress/e2e/messaging.cy.ts
@@ -1,8 +1,5 @@
 import { stubPlus } from "cypress/support/stubs";
 
-const getSelectOptionList = (selectorId: string) =>
-  cy.getByTestId(selectorId).click().find(`.custom-select__menu-list`);
-
 describe("Messaging", () => {
   beforeEach(() => {
     cy.login();
@@ -77,9 +74,8 @@ describe("Messaging", () => {
 
     cy.getByTestId("add-messaging-template-modal").should("exist");
 
-    getSelectOptionList("template-type-selector")
-      .find(".custom-select__option")
-      .should("have.length", customizableMessagesCount);
+    cy.getByTestId("template-type-selector").click();
+    cy.get(".ant-select-item").should("have.length", customizableMessagesCount);
   });
 
   it("should redirect to the add new page after selecting a message type", () => {
@@ -88,7 +84,9 @@ describe("Messaging", () => {
 
     cy.getByTestId("add-message-btn").click();
 
-    cy.selectOption("template-type-selector", "Access request completed");
+    cy.getByTestId("template-type-selector")
+      .find(".ant-select")
+      .antSelect("Access request completed");
 
     cy.getByTestId("confirm-btn").click();
 
@@ -131,9 +129,7 @@ describe("Messaging", () => {
 
     cy.getByTestId("submit-btn").should("be.disabled");
     cy.getByTestId("add-property").click();
-    cy.getByTestId("select-property")
-      .find(".select-property__input-container")
-      .click();
+    cy.getByTestId("select-property").click();
     cy.getByTestId("select-property").find("input").focus().type("{enter}");
     cy.getByTestId("submit-btn").should("be.enabled");
     cy.getByTestId("submit-btn").click();
diff --git a/clients/admin-ui/cypress/e2e/privacy-experiences.cy.ts b/clients/admin-ui/cypress/e2e/privacy-experiences.cy.ts
index d53ac6f8f3..1df388b341 100644
--- a/clients/admin-ui/cypress/e2e/privacy-experiences.cy.ts
+++ b/clients/admin-ui/cypress/e2e/privacy-experiences.cy.ts
@@ -188,17 +188,10 @@ describe("Privacy experiences", () => {
         cy.getByTestId("input-name").type("Test experience name");
         cy.selectOption("input-component", "Banner and modal");
         cy.getByTestId("add-privacy-notice").click();
-        cy.getByTestId("select-privacy-notice").click();
-        cy.get(".select-privacy-notice__menu")
-          .find(".select-privacy-notice__option")
-          .first()
-          .click();
+        cy.getByTestId("select-privacy-notice").antSelect(0);
         cy.getByTestId("add-location").click();
-        cy.getByTestId("select-location").click();
-        cy.get(".select-location__menu")
-          .find(".select-location__option")
-          .first()
-          .click();
+
+        cy.getByTestId("select-location").antSelect("France");
         cy.intercept("POST", "/api/v1/experience-config", {
           statusCode: 200,
         }).as("postExperience");
@@ -256,11 +249,7 @@ describe("Privacy experiences", () => {
           "No privacy notices added",
         );
         cy.getByTestId("add-privacy-notice").click();
-        cy.getByTestId("select-privacy-notice").click();
-        cy.get(".select-privacy-notice__menu")
-          .find(".select-privacy-notice__option")
-          .first()
-          .click();
+        cy.getByTestId("select-privacy-notice").antSelect(0);
         cy.getByTestId("no-preview-notice").should("not.exist");
         cy.get(`#${PREVIEW_CONTAINER_ID}`).should("be.visible");
       });
@@ -269,12 +258,7 @@ describe("Privacy experiences", () => {
         cy.getByTestId("input-show_layer1_notices").should("not.be.visible");
         cy.selectOption("input-component", "Banner and modal");
         cy.getByTestId("add-privacy-notice").click();
-        cy.getByTestId("select-privacy-notice").click();
-        cy.get(".select-privacy-notice__menu")
-          .find(".select-privacy-notice__option")
-          .first()
-          .as("SelectedPrivacyNotice")
-          .click();
+        cy.getByTestId("select-privacy-notice").antSelect(0);
         cy.getByTestId("input-show_layer1_notices").click();
         cy.get("#preview-container")
           .find("#fides-banner")
@@ -285,11 +269,7 @@ describe("Privacy experiences", () => {
       it("allows editing experience text and shows updated text in the preview", () => {
         cy.selectOption("input-component", "Banner and modal");
         cy.getByTestId("add-privacy-notice").click();
-        cy.getByTestId("select-privacy-notice").click();
-        cy.get(".select-privacy-notice__menu")
-          .find(".select-privacy-notice__option")
-          .first()
-          .click();
+        cy.getByTestId("select-privacy-notice").antSelect(0);
         cy.getByTestId("edit-experience-btn").click();
         cy.getByTestId("input-translations.0.title")
           .clear()
diff --git a/clients/admin-ui/cypress/e2e/privacy-notices.cy.ts b/clients/admin-ui/cypress/e2e/privacy-notices.cy.ts
index b2288d33a8..53950f0d7b 100644
--- a/clients/admin-ui/cypress/e2e/privacy-notices.cy.ts
+++ b/clients/admin-ui/cypress/e2e/privacy-notices.cy.ts
@@ -242,13 +242,7 @@ describe("Privacy notices", () => {
           "Notice only",
         );
 
-        cy.getByTestId("notice-locations").within(() => {
-          cy.get(".notice-locations--is-disabled");
-          cy.get(".notice-locations__value-container").should(
-            "contain",
-            "United States",
-          );
-        });
+        cy.getByTestId("notice-locations").should("contain", "United States");
 
         cy.getByTestId("input-has_gpc_flag").within(() => {
           cy.get("span").should("not.have.attr", "data-checked");
@@ -317,10 +311,7 @@ describe("Privacy notices", () => {
 
         cy.getByTestId("add-children").click();
         cy.getByTestId("select-children").click();
-        cy.get(".select-children__menu")
-          .find(".select-children__option")
-          .first()
-          .click();
+        cy.get(".ant-select-dropdown").find(".ant-select-item").first().click();
 
         cy.getByTestId("save-btn").click();
         cy.wait("@patchNotices").then((interception) => {
@@ -391,8 +382,7 @@ describe("Privacy notices", () => {
 
       // add a new translation
       cy.getByTestId("add-language-btn").click();
-      cy.getByTestId("select-language").click();
-      cy.get(".select-language__menu").find(".select-language__option").click();
+      cy.getByTestId("select-language").antSelect("French");
       cy.getByTestId("input-translations.1.title").type("Le titre");
       cy.getByTestId("input-translations.1.description").type(
         "Un description français",
diff --git a/clients/admin-ui/cypress/e2e/system-integrations-plus.cy.ts b/clients/admin-ui/cypress/e2e/system-integrations-plus.cy.ts
index e3ee8373b6..0de1c76610 100644
--- a/clients/admin-ui/cypress/e2e/system-integrations-plus.cy.ts
+++ b/clients/admin-ui/cypress/e2e/system-integrations-plus.cy.ts
@@ -102,30 +102,10 @@ describe("System integrations", () => {
       cy.getByTestId("consentable-item-label").should("have.length", 5);
       cy.getByTestId("consentable-item-label-child").should("have.length", 6);
       cy.getByTestId("consentable-item-select").should("have.length", 11);
-      cy.getByTestId("consentable-item-select")
-        .first()
-        .within(() => {
-          cy.get(".custom-select__input").focus().realPress(" ");
-        });
-      cy.get(".custom-select__menu").first().should("exist");
-      cy.get(".custom-select__menu")
-        .first()
-        .within(() => {
-          cy.get(".custom-select__option").should("have.length", 5);
-        });
     });
     it("should save the consent automation settings", () => {
       cy.getByTestId("accordion-consent-automation").click();
-      cy.getByTestId("consentable-item-select")
-        .first()
-        .within(() => {
-          cy.get(".custom-select__input").focus().realPress(" ");
-        });
-      cy.get(".custom-select__menu")
-        .first()
-        .within(() => {
-          cy.get(".custom-select__option").first().click();
-        });
+      cy.getByTestId("consentable-item-select").antSelect(0);
       cy.getByTestId("save-consent-automation").click();
       cy.wait("@putConsentableItems").then((interception) => {
         cy.fixture("connectors/consentable_items.json").then((expected) => {
diff --git a/clients/admin-ui/cypress/support/ant-support.ts b/clients/admin-ui/cypress/support/ant-support.ts
new file mode 100644
index 0000000000..f9f0569b62
--- /dev/null
+++ b/clients/admin-ui/cypress/support/ant-support.ts
@@ -0,0 +1,62 @@
+/// <reference types="cypress" />
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      getAntSelectOption: (optionLabel: string | number) => Chainable;
+      /**
+       * Select an option from an Ant Design Select component
+       * @param option The label of the option to select or the index of the option
+       */
+      antSelect: (
+        option: string | number,
+        clickOptions?: { force?: boolean },
+      ) => void;
+      /**
+       * Clear all options from an Ant Design Select component
+       */
+      antClearSelect: () => void;
+    }
+  }
+}
+
+Cypress.Commands.add("getAntSelectOption", (option: string | number) =>
+  typeof option === "string"
+    ? cy.get(`.ant-select-item-option[title="${option}"]`)
+    : cy.get(`.ant-select-item-option`).eq(option),
+);
+
+Cypress.Commands.add(
+  "antSelect",
+  {
+    prevSubject: "element",
+  },
+  (subject, option, clickOptions) => {
+    cy.get(subject.selector).first().should("have.class", "ant-select");
+    cy.get(subject.selector)
+      .first()
+      .invoke("attr", "class")
+      .then((classes) => {
+        if (classes.includes("ant-select-disabled")) {
+          throw new Error("Cannot select from a disabled Ant Select component");
+        }
+        if (!classes.includes("ant-select-open")) {
+          cy.get(subject.selector).first().click(clickOptions);
+        }
+      });
+    cy.getAntSelectOption(option).should("be.visible").click(clickOptions);
+  },
+);
+
+Cypress.Commands.add(
+  "antClearSelect",
+  {
+    prevSubject: "element",
+  },
+  (subject) => {
+    cy.get(subject.selector).should("have.class", "ant-select-allow-clear");
+    cy.get(subject.selector).find(".ant-select-clear").click({ force: true });
+  },
+);
+
+export {};
diff --git a/clients/admin-ui/cypress/support/e2e.ts b/clients/admin-ui/cypress/support/e2e.ts
index 6f56418768..4bfe584c46 100644
--- a/clients/admin-ui/cypress/support/e2e.ts
+++ b/clients/admin-ui/cypress/support/e2e.ts
@@ -15,6 +15,7 @@
 
 // Import commands.js using ES2015 syntax:
 import "./commands";
+import "./ant-support";
 // eslint-disable-next-line import/no-extraneous-dependencies
 import "cypress-real-events";
 
diff --git a/clients/admin-ui/src/features/common/ScrollableList.tsx b/clients/admin-ui/src/features/common/ScrollableList.tsx
index a24751284c..26c2232123 100644
--- a/clients/admin-ui/src/features/common/ScrollableList.tsx
+++ b/clients/admin-ui/src/features/common/ScrollableList.tsx
@@ -1,6 +1,6 @@
-import { Select } from "chakra-react-select";
 import {
   AntButton as Button,
+  AntSelect as Select,
   Box,
   ChakraProps,
   DeleteIcon,
@@ -13,7 +13,7 @@ import {
 import { motion, Reorder, useDragControls } from "framer-motion";
 import { useState } from "react";
 
-import { Label, Option, SELECT_STYLES } from "~/features/common/form/inputs";
+import { Label, Option } from "~/features/common/form/inputs";
 import QuestionTooltip from "~/features/common/QuestionTooltip";
 
 const ScrollableListItem = <T extends unknown>({
@@ -112,24 +112,26 @@ const ScrollableListAdd = ({
   const [isAdding, setIsAdding] = useState<boolean>(false);
   const [selectValue, setSelectValue] = useState<Option | undefined>(undefined);
 
-  const handleElementSelected = (event: any) => {
-    onOptionSelected(event);
+  const handleElementSelected = (value: Option) => {
+    onOptionSelected(value);
     setIsAdding(false);
     setSelectValue(undefined);
   };
 
   return isAdding ? (
-    <Box w="full" data-testid={`select-${baseTestId}`}>
+    <Box w="full">
       <Select
-        chakraStyles={SELECT_STYLES}
-        size="sm"
+        showSearch
+        labelInValue
+        placeholder="Select..."
+        filterOption={(input, option) =>
+          (option?.label ?? "").toLowerCase().includes(input.toLowerCase())
+        }
         value={selectValue}
         options={options}
-        onChange={(e: any) => handleElementSelected(e)}
-        autoFocus
-        menuPosition="fixed"
-        menuPlacement="auto"
-        classNamePrefix={`select-${baseTestId}`}
+        onChange={handleElementSelected}
+        className="w-full"
+        data-testid={`select-${baseTestId}`}
       />
     </Box>
   ) : (
diff --git a/clients/admin-ui/src/features/common/TaxonomiesPicker.tsx b/clients/admin-ui/src/features/common/TaxonomiesPicker.tsx
index 9f5ab05085..290fccbaf2 100644
--- a/clients/admin-ui/src/features/common/TaxonomiesPicker.tsx
+++ b/clients/admin-ui/src/features/common/TaxonomiesPicker.tsx
@@ -6,10 +6,9 @@ import {
   SmallAddIcon,
   Wrap,
 } from "fidesui";
-import { useCallback, useState } from "react";
+import { useState } from "react";
 
-import TaxonomySelectDropdown from "~/features/common/dropdown/TaxonomySelectDropdown";
-import { useOutsideClick } from "~/features/common/hooks";
+import { TaxonomySelect } from "~/features/common/dropdown/TaxonomySelect";
 
 import useTaxonomies from "./hooks/useTaxonomies";
 
@@ -27,12 +26,6 @@ const TaxonomiesPicker = ({
   const [isAdding, setIsAdding] = useState(false);
   const { getDataCategoryDisplayName } = useTaxonomies();
 
-  const handleClickOutside = useCallback(() => {
-    setIsAdding(false);
-  }, []);
-
-  const { ref } = useOutsideClick(handleClickOutside);
-
   return (
     <Wrap
       py={2}
@@ -41,7 +34,6 @@ const TaxonomiesPicker = ({
       width="100%"
       gap={2}
       overflowX="auto"
-      ref={ref}
     >
       {selectedTaxonomies.map((category) => (
         <Badge
@@ -84,12 +76,14 @@ const TaxonomiesPicker = ({
           height="max"
           bgColor="#fff"
         >
-          <TaxonomySelectDropdown
+          <TaxonomySelect
+            selectedTaxonomies={selectedTaxonomies}
             onChange={(o) => {
               setIsAdding(false);
-              onAddTaxonomy(o.value);
+              onAddTaxonomy(o);
             }}
-            menuIsOpen
+            onBlur={() => setIsAdding(false)}
+            open={isAdding}
           />
         </Box>
       )}
diff --git a/clients/admin-ui/src/features/common/dropdown/FilterSelect.tsx b/clients/admin-ui/src/features/common/dropdown/FilterSelect.tsx
new file mode 100644
index 0000000000..e21969e001
--- /dev/null
+++ b/clients/admin-ui/src/features/common/dropdown/FilterSelect.tsx
@@ -0,0 +1,16 @@
+import { AntSelect as Select, AntSelectProps as SelectProps } from "fidesui";
+
+export const FilterSelect = <ValueType,>({
+  ...props
+}: SelectProps<ValueType>) => {
+  const isMulti = props.mode === "multiple";
+  return (
+    <Select<ValueType>
+      defaultActiveFirstOption={false}
+      maxTagCount="responsive"
+      allowClear
+      dropdownStyle={isMulti ? undefined : { width: "auto", minWidth: "200px" }}
+      {...props}
+    />
+  );
+};
diff --git a/clients/admin-ui/src/features/common/dropdown/TaxonomySelect.module.scss b/clients/admin-ui/src/features/common/dropdown/TaxonomySelect.module.scss
new file mode 100644
index 0000000000..782475287b
--- /dev/null
+++ b/clients/admin-ui/src/features/common/dropdown/TaxonomySelect.module.scss
@@ -0,0 +1,17 @@
+// option bolds the parent name and shows the description on hover
+.option {
+  strong {
+    font-weight: 400;
+  }
+  em {
+    visibility: hidden;
+  }
+  &:hover {
+    strong {
+      font-weight: 600;
+    }
+    em {
+      visibility: visible;
+    }
+  }
+}
diff --git a/clients/admin-ui/src/features/common/dropdown/TaxonomySelect.tsx b/clients/admin-ui/src/features/common/dropdown/TaxonomySelect.tsx
new file mode 100644
index 0000000000..ef9450be4c
--- /dev/null
+++ b/clients/admin-ui/src/features/common/dropdown/TaxonomySelect.tsx
@@ -0,0 +1,82 @@
+import {
+  AntFlex as Flex,
+  AntSelect as Select,
+  AntSelectProps as SelectProps,
+} from "fidesui";
+
+import useTaxonomies from "../hooks/useTaxonomies";
+import styles from "./TaxonomySelect.module.scss";
+
+export interface TaxonomySelectOption {
+  value: string;
+  name?: string;
+  primaryName?: string;
+  description: string;
+  className?: string;
+}
+
+const TaxonomyOption = ({ data }: { data: TaxonomySelectOption }) => {
+  return (
+    <Flex
+      gap={12}
+      title={`${data.primaryName || ""}${data.primaryName ? ": " : ""}${data.name} - ${data.description}`}
+    >
+      <div>
+        <strong>{data.primaryName || data.name}</strong>
+        {data.primaryName && `: ${data.name}`}
+      </div>
+      <em>{data.description}</em>
+    </Flex>
+  );
+};
+
+interface TaxonomySelectProps
+  extends SelectProps<string, TaxonomySelectOption> {
+  selectedTaxonomies: string[];
+  showDisabled?: boolean;
+}
+export const TaxonomySelect = ({
+  selectedTaxonomies,
+  showDisabled = false,
+  ...props
+}: TaxonomySelectProps) => {
+  const { getDataCategoryDisplayNameProps, getDataCategories } =
+    useTaxonomies();
+
+  const getActiveDataCategories = () =>
+    getDataCategories().filter((c) => c.active);
+
+  const dataCategories = showDisabled
+    ? getDataCategories()
+    : getActiveDataCategories();
+
+  const options: TaxonomySelectOption[] = dataCategories
+    .filter((category) => !selectedTaxonomies.includes(category.fides_key))
+    .map((category) => {
+      const { name, primaryName } = getDataCategoryDisplayNameProps(
+        category.fides_key,
+      );
+      return {
+        value: category.fides_key,
+        name,
+        primaryName,
+        description: category.description || "",
+        className: styles.option,
+      };
+    });
+
+  return (
+    <Select<string, TaxonomySelectOption>
+      autoFocus
+      showSearch
+      variant="borderless"
+      placeholder="Select a category..."
+      options={options}
+      optionRender={TaxonomyOption}
+      dropdownStyle={{ minWidth: "500px" }}
+      className="w-full p-0"
+      data-testid="taxonomy-select"
+      {...props}
+    />
+  );
+};
diff --git a/clients/admin-ui/src/features/common/dropdown/TaxonomySelectDropdown.tsx b/clients/admin-ui/src/features/common/dropdown/TaxonomySelectDropdown.tsx
deleted file mode 100644
index 2c4553696b..0000000000
--- a/clients/admin-ui/src/features/common/dropdown/TaxonomySelectDropdown.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { OptionProps, Options, Select } from "chakra-react-select";
-import { Box, HStack, Tag, Text } from "fidesui";
-
-import { SELECT_STYLES } from "~/features/common/form/inputs";
-import { sentenceCase } from "~/features/common/utils";
-
-import useTaxonomies from "../hooks/useTaxonomies";
-
-export interface TaxonomySelectOption {
-  value: string;
-  label: string | JSX.Element;
-  description: string;
-}
-
-const TaxonomyOption = ({
-  data,
-  setValue,
-}: OptionProps<TaxonomySelectOption>) => {
-  const { getPrimaryKey, getDataCategoryByKey } = useTaxonomies();
-  const primaryKey = getPrimaryKey(data.value, 2);
-  const primaryCategory = getDataCategoryByKey(primaryKey);
-  return (
-    <Box
-      onClick={() => setValue(data, "select-option")}
-      cursor="pointer"
-      borderBottomColor="gray.100"
-      borderBottomWidth={1}
-      paddingX={3}
-      paddingY={1.5}
-      _hover={{
-        backgroundColor: "gray.100",
-      }}
-      data-testid={`option-${data.value}`}
-    >
-      <HStack gap={1} alignItems="center">
-        <Tag
-          paddingX={2}
-          paddingY={0}
-          fontWeight={600}
-          colorScheme="gray"
-          fontSize="xs"
-        >
-          {sentenceCase(primaryCategory?.name || "")}
-        </Tag>
-        <Text fontSize="sm" whiteSpace="normal">
-          : {data.value}
-        </Text>
-      </HStack>
-      <Text
-        fontSize="xs"
-        lineHeight="18px"
-        mt={1}
-        color="gray.500"
-        whiteSpace="normal"
-      >
-        {data.description}
-      </Text>
-    </Box>
-  );
-};
-
-interface TaxonomySelectDropdownProps {
-  onChange: (selectedOption: TaxonomySelectOption) => void;
-  menuIsOpen?: boolean;
-  showDisabled?: boolean;
-}
-const TaxonomySelectDropdown = ({
-  onChange,
-  menuIsOpen,
-  showDisabled = false,
-}: TaxonomySelectDropdownProps) => {
-  const { getDataCategoryDisplayName, getDataCategories } = useTaxonomies();
-
-  const getActiveDataCategories = () =>
-    getDataCategories().filter((c) => c.active);
-
-  const dataCategories = showDisabled
-    ? getDataCategories()
-    : getActiveDataCategories();
-
-  const options: Options<TaxonomySelectOption> = dataCategories.map(
-    (category) => ({
-      value: category.fides_key,
-      label: getDataCategoryDisplayName(category.fides_key),
-      description: category.description || "",
-    }),
-  );
-
-  return (
-    <Select
-      placeholder="Select a category..."
-      onChange={onChange as any}
-      options={options}
-      size="sm"
-      menuPosition="absolute"
-      autoFocus
-      isSearchable
-      menuPlacement="auto"
-      components={{
-        Option: TaxonomyOption,
-      }}
-      menuIsOpen={menuIsOpen}
-      chakraStyles={{
-        ...(SELECT_STYLES as Options<TaxonomySelectOption>),
-        control: (baseStyles) => ({ ...baseStyles, border: "none" }),
-        menuList: (baseStyles) => ({
-          ...baseStyles,
-          paddingTop: 0,
-          paddingBottom: 0,
-          mt: 10,
-          position: "fixed",
-          overflowX: "hidden",
-          maxWidth: "lg",
-        }),
-      }}
-    />
-  );
-};
-export default TaxonomySelectDropdown;
diff --git a/clients/admin-ui/src/features/common/hooks/index.ts b/clients/admin-ui/src/features/common/hooks/index.ts
index 845cf6af9b..8c490f7f2e 100644
--- a/clients/admin-ui/src/features/common/hooks/index.ts
+++ b/clients/admin-ui/src/features/common/hooks/index.ts
@@ -1,3 +1,2 @@
 export * from "./useAlert";
 export * from "./useAPIHelper";
-export * from "./useOutsideClick";
diff --git a/clients/admin-ui/src/features/common/hooks/useOutsideClick.ts b/clients/admin-ui/src/features/common/hooks/useOutsideClick.ts
deleted file mode 100644
index d69c90955a..0000000000
--- a/clients/admin-ui/src/features/common/hooks/useOutsideClick.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { LegacyRef, useEffect, useRef } from "react";
-
-// eslint-disable-next-line import/prefer-default-export
-export const useOutsideClick = (handleClick: () => void) => {
-  const ref = useRef<HTMLDivElement | undefined>(undefined) as
-    | LegacyRef<HTMLDivElement>
-    | undefined;
-  useEffect(() => {
-    const handleOutsideClick = (event: MouseEvent) => {
-      // @ts-ignore
-      if (!ref.current?.contains(event.target)) {
-        handleClick();
-      }
-    };
-    document.addEventListener("mousedown", handleOutsideClick);
-    return () => {
-      document.removeEventListener("mousedown", handleOutsideClick);
-    };
-  }, [ref, handleClick]);
-
-  return { ref };
-};
diff --git a/clients/admin-ui/src/features/common/hooks/useTaxonomies.test.ts b/clients/admin-ui/src/features/common/hooks/useTaxonomies.test.ts
index 4fc37c3294..0b7d692a29 100644
--- a/clients/admin-ui/src/features/common/hooks/useTaxonomies.test.ts
+++ b/clients/admin-ui/src/features/common/hooks/useTaxonomies.test.ts
@@ -23,9 +23,7 @@ describe("Fides Language Helper Hook", () => {
     it("returns the top-level parent name in bold and the name if it's a child data use", () => {
       expect(
         renderToStaticMarkup(getDataUseDisplayName("analytics.reporting")),
-      ).toBe(
-        "<span><strong>Analytics:</strong> Analytics for Reporting</span>",
-      );
+      ).toBe("<strong>Analytics:</strong> Analytics for Reporting");
     });
     it("returns the key if it can't find the data use", () => {
       expect(getDataUseDisplayName("invalidkey")).toBe("invalidkey");
@@ -48,7 +46,7 @@ describe("Fides Language Helper Hook", () => {
         renderToStaticMarkup(
           getDataCategoryDisplayName("system.authentication.user"),
         ),
-      ).toBe("<span><strong>Authentication Data:</strong> User</span>");
+      ).toBe("<strong>Authentication Data:</strong> User");
     });
     it("returns the key if it can't find the data category", () => {
       expect(getDataCategoryDisplayName("invalidkey")).toBe("invalidkey");
diff --git a/clients/admin-ui/src/features/common/hooks/useTaxonomies.tsx b/clients/admin-ui/src/features/common/hooks/useTaxonomies.tsx
index c39e5da469..15bc018535 100644
--- a/clients/admin-ui/src/features/common/hooks/useTaxonomies.tsx
+++ b/clients/admin-ui/src/features/common/hooks/useTaxonomies.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import { find } from "lodash";
-import { ReactNode } from "react";
+import { Fragment, ReactNode } from "react";
 
 import { useAppSelector } from "~/app/hooks";
 import {
@@ -25,13 +25,12 @@ const useTaxonomies = () => {
     return tokens.join(delimiter);
   };
 
-  /**
-   * getDataDisplayName
-   * Used to convert a fideslang key for Data Use or Data Category into
-   * a human-readable name with hierarchy. eg. functional.storage -> "Functional: Local Data Storage"
-   * Data subjects has their own simpler function (getDataSubjectDisplayName) below.
-   */
-  const getDataDisplayName = (
+  interface DataDisplayNameProps {
+    primaryName?: string;
+    name?: string;
+  }
+
+  const getDataDisplayNameProps = (
     fidesLangKey: string,
     getDataFunction: (fidesLangKey: string) =>
       | {
@@ -40,11 +39,11 @@ const useTaxonomies = () => {
         }
       | undefined,
     primaryLevel = 1,
-  ): string | JSX.Element => {
+  ): DataDisplayNameProps => {
     const data = getDataFunction(fidesLangKey);
     if (!data) {
       // Fallback to return key without changes
-      return fidesLangKey;
+      return {};
     }
 
     const primaryLevelData = getDataFunction(
@@ -53,16 +52,49 @@ const useTaxonomies = () => {
 
     const isChild = !!data.parent_key;
 
-    if (!isChild || primaryLevelData?.name === data.name) {
-      // must include a key since this function is used as an iterator
-      return <strong key={fidesLangKey}>{data.name}</strong>;
+    return {
+      name: data.name || undefined,
+      primaryName:
+        isChild && primaryLevelData?.name !== data.name
+          ? primaryLevelData?.name || undefined
+          : undefined,
+    };
+  };
+
+  /**
+   * getDataDisplayName
+   * Used to convert a fideslang key for Data Use or Data Category into
+   * a human-readable name with hierarchy. eg. functional.storage -> "Functional: Local Data Storage"
+   * Data subjects has their own simpler function (getDataSubjectDisplayName) below.
+   */
+  const getDataDisplayName = (
+    fidesLangKey: string,
+    getDataFunction: (fidesLangKey: string) =>
+      | {
+          parent_key?: string | null;
+          name?: string | null;
+        }
+      | undefined,
+    primaryLevel = 1,
+  ): string | JSX.Element => {
+    const { name, primaryName } = getDataDisplayNameProps(
+      fidesLangKey,
+      getDataFunction,
+      primaryLevel,
+    );
+
+    if (!name) {
+      // Fallback to return key without changes
+      return fidesLangKey;
     }
 
-    return (
+    return primaryName ? (
       // must include a key since this function is used as an iterator
-      <span key={fidesLangKey}>
-        <strong>{primaryLevelData?.name}:</strong> {data.name}
-      </span>
+      <Fragment key={fidesLangKey}>
+        <strong>{primaryName}:</strong> {name}
+      </Fragment>
+    ) : (
+      <strong key={fidesLangKey}>{name}</strong>
     );
   };
 
@@ -86,6 +118,10 @@ const useTaxonomies = () => {
     dataCategoryKey: string,
   ): JSX.Element | string =>
     getDataDisplayName(dataCategoryKey, getDataCategoryByKey, 2);
+  const getDataCategoryDisplayNameProps = (
+    dataCategoryKey: string,
+  ): DataDisplayNameProps =>
+    getDataDisplayNameProps(dataCategoryKey, getDataCategoryByKey, 2);
 
   /*
     Data Subjects
@@ -110,6 +146,7 @@ const useTaxonomies = () => {
     getDataCategories,
     getDataCategoryByKey,
     getDataCategoryDisplayName,
+    getDataCategoryDisplayNameProps,
     getDataSubjects,
     getDataSubjectByKey,
     getDataSubjectDisplayName,
diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/EditCategoryCell.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/EditCategoryCell.tsx
index 3e01ca2f79..d380816c49 100644
--- a/clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/EditCategoryCell.tsx
+++ b/clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/EditCategoryCell.tsx
@@ -7,17 +7,14 @@ import {
   SmallAddIcon,
   Wrap,
 } from "fidesui";
-import { useCallback, useState } from "react";
+import { useState } from "react";
 
+import { TaxonomySelect } from "~/features/common/dropdown/TaxonomySelect";
 import useTaxonomies from "~/features/common/hooks/useTaxonomies";
 import { SparkleIcon } from "~/features/common/Icon/SparkleIcon";
 import ClassificationCategoryBadge from "~/features/data-discovery-and-detection/ClassificationCategoryBadge";
 import { DiscoveryMonitorItem } from "~/features/data-discovery-and-detection/types/DiscoveryMonitorItem";
 
-import TaxonomySelectDropdown, {
-  TaxonomySelectOption,
-} from "../../../common/dropdown/TaxonomySelectDropdown";
-import { useOutsideClick } from "../../../common/hooks";
 import { useUpdateResourceCategoryMutation } from "../../discovery-detection.slice";
 
 const AddCategoryButton = (props: ButtonProps) => (
@@ -40,11 +37,6 @@ const EditCategoriesCell = ({ resource }: EditCategoryCellProps) => {
   const { getDataCategoryDisplayName } = useTaxonomies();
   const [updateResourceCategoryMutation] = useUpdateResourceCategoryMutation();
 
-  const handleClickOutside = useCallback(() => {
-    setIsAdding(false);
-  }, []);
-  const { ref } = useOutsideClick(handleClickOutside);
-
   const bestClassifiedCategory = resource.classifications?.length
     ? resource.classifications[0].label
     : null;
@@ -55,11 +47,11 @@ const EditCategoriesCell = ({ resource }: EditCategoryCellProps) => {
 
   const hasSubfields = resource.sub_field_urns?.length;
 
-  const handleAddCategory = (option: TaxonomySelectOption) => {
+  const handleAddCategory = (value: string) => {
     updateResourceCategoryMutation({
       staged_resource_urn: resource.urn,
       monitor_config_id: resource.monitor_config_id!,
-      user_assigned_data_categories: [...userCategories, option.value],
+      user_assigned_data_categories: [...userCategories, value],
     });
   };
 
@@ -85,7 +77,6 @@ const EditCategoriesCell = ({ resource }: EditCategoryCellProps) => {
       width="100%"
       gap={2}
       overflowX="auto"
-      ref={ref}
     >
       {noCategories && (
         <>
@@ -146,7 +137,15 @@ const EditCategoriesCell = ({ resource }: EditCategoryCellProps) => {
           height="max"
           bgColor="#fff"
         >
-          <TaxonomySelectDropdown onChange={handleAddCategory} menuIsOpen />
+          <TaxonomySelect
+            selectedTaxonomies={userCategories}
+            onChange={(o) => {
+              setIsAdding(false);
+              handleAddCategory(o);
+            }}
+            onBlur={() => setIsAdding(false)}
+            open
+          />
         </Box>
       )}
     </Wrap>
diff --git a/clients/admin-ui/src/features/datamap/modals/ReportExportModal.tsx b/clients/admin-ui/src/features/datamap/modals/ReportExportModal.tsx
index 7365f8e874..03785566c5 100644
--- a/clients/admin-ui/src/features/datamap/modals/ReportExportModal.tsx
+++ b/clients/admin-ui/src/features/datamap/modals/ReportExportModal.tsx
@@ -1,4 +1,10 @@
-import { Flex, FormControl, FormLabel, Select, Text } from "fidesui";
+import {
+  AntSelect as Select,
+  Flex,
+  FormControl,
+  FormLabel,
+  Text,
+} from "fidesui";
 import { useState } from "react";
 
 import StandardDialog, {
@@ -32,15 +38,18 @@ const ReportExportModal = (props: ReportExportModalProps): JSX.Element => {
           number of rows, the file may take a few minutes to process.
         </Text>
         <FormControl>
-          <FormLabel>Choose Format</FormLabel>
+          <FormLabel htmlFor="format">Choose Format</FormLabel>
           <Select
+            id="format"
             value={downloadType}
-            onChange={(e) => setDownloadType(e.target.value as ExportFormat)}
+            onChange={setDownloadType}
             data-testid="export-format-select"
-          >
-            <option value={ExportFormat.csv}>CSV</option>
-            <option value={ExportFormat.xlsx}>XLSX</option>
-          </Select>
+            options={[
+              { value: ExportFormat.csv, label: "CSV" },
+              { value: ExportFormat.xlsx, label: "XLSX" },
+            ]}
+            className="w-full"
+          />
         </FormControl>
       </Flex>
     </StandardDialog>
diff --git a/clients/admin-ui/src/features/datastore-connections/add-connection/DatasetConfiguration.tsx b/clients/admin-ui/src/features/datastore-connections/add-connection/DatasetConfiguration.tsx
index e8e5d44f25..8ca453811f 100644
--- a/clients/admin-ui/src/features/datastore-connections/add-connection/DatasetConfiguration.tsx
+++ b/clients/admin-ui/src/features/datastore-connections/add-connection/DatasetConfiguration.tsx
@@ -7,17 +7,18 @@ import {
 import { PatchDatasetsConfigRequest } from "datastore-connections/types";
 import {
   AntButton as Button,
+  AntDivider as Divider,
+  AntSelect as Select,
   Box,
   Center,
   HStack,
-  Select,
   Spinner,
   Text,
   TextProps,
   VStack,
 } from "fidesui";
 import { useRouter } from "next/router";
-import React, { ChangeEvent, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 import { useAppSelector } from "~/app/hooks";
 import { getErrorMessage } from "~/features/common/helpers";
@@ -62,10 +63,6 @@ const DatasetConfiguration = () => {
     }
   }, [data]);
 
-  const handleCancel = () => {
-    router.push(DATASTORE_CONNECTION_ROUTE);
-  };
-
   const handlePatchDatasetConfig = async (
     datasetPairs: DatasetConfigCtlDataset[],
   ) => {
@@ -138,10 +135,6 @@ const DatasetConfiguration = () => {
     }
   };
 
-  const handleSelectDataset = (event: ChangeEvent<HTMLSelectElement>) => {
-    setSelectedDatasetKey(event.target.value);
-  };
-
   const datasetSelected =
     selectedDatasetKey !== "" && selectedDatasetKey !== undefined;
 
@@ -160,67 +153,62 @@ const DatasetConfiguration = () => {
   const datasetsExist = allDatasets && allDatasets.length;
 
   return (
-    <VStack alignItems="left">
-      {loadAllDatasetsError ? (
-        <Copy mb={4} color="red">
+    <VStack alignItems="left" gap={4}>
+      {loadAllDatasetsError && (
+        <Copy color="red">
           There was a problem loading existing datasets, please try again.
         </Copy>
-      ) : null}
-      <HStack spacing={8} mb={4}>
-        {datasetsExist ? (
-          <>
-            <VStack alignSelf="start" mr={4}>
-              <Box data-testid="dataset-selector-section" mb={4}>
+      )}
+      <VStack alignItems="flex-start">
+        {datasetsExist && (
+          <div>
+            <VStack alignSelf="start" gap={4}>
+              <Box data-testid="dataset-selector-section">
                 <Copy mb={4}>
                   Choose a dataset to associate with this connector.
                 </Copy>
-                <Select
-                  size="sm"
-                  width="fit-content"
-                  placeholder="Select"
-                  onChange={handleSelectDataset}
-                  value={selectedDatasetKey}
-                  data-testid="dataset-selector"
-                >
-                  {allDatasets.map((ds) => (
-                    <option key={ds.fides_key} value={ds.fides_key}>
-                      {ds.fides_key}
-                    </option>
-                  ))}
-                </Select>
+                <HStack>
+                  <Select
+                    allowClear
+                    options={allDatasets.map((ds) => ({
+                      label: ds.fides_key,
+                      value: ds.fides_key,
+                    }))}
+                    className="w-full"
+                    placeholder="Select"
+                    onChange={(value) => setSelectedDatasetKey(value)}
+                    value={selectedDatasetKey}
+                    data-testid="dataset-selector"
+                  />
+                  <Button
+                    onClick={handleLinkDataset}
+                    type="primary"
+                    className="self-start"
+                    disabled={!datasetSelected}
+                    data-testid="save-dataset-link-btn"
+                  >
+                    Save
+                  </Button>
+                </HStack>
               </Box>
-              <Button
-                onClick={handleLinkDataset}
-                type="primary"
-                className="self-start"
-                disabled={!datasetSelected}
-                data-testid="save-dataset-link-btn"
-              >
-                Save
-              </Button>
             </VStack>
-            <Copy>or</Copy>
-          </>
-        ) : null}
-        <Box data-testid="yaml-editor-section">
-          <Copy mb={4}>View your dataset YAML below!</Copy>
-          {isSuccess && data!?.items ? (
+          </div>
+        )}
+        {datasetsExist && isSuccess && data!?.items && (
+          <Divider plain>or</Divider>
+        )}
+        {isSuccess && data!?.items && (
+          <Box data-testid="yaml-editor-section">
+            <Copy mb={4}>View your dataset YAML below!</Copy>
             <YamlEditorForm
               data={data.items.map((item) => item.ctl_dataset)}
               isSubmitting={isSubmitting}
               onSubmit={handleSubmitYaml}
               disabled={datasetSelected}
-              // Only render the cancel button if the dataset dropdown view is unavailable
-              onCancel={!datasetsExist ? handleCancel : undefined}
             />
-          ) : null}
-        </Box>
-      </HStack>
-      {datasetsExist ? (
-        <Button onClick={handleCancel} className="w-fit">
-          Cancel
-        </Button>
-      ) : null}
+          </Box>
+        )}
+      </VStack>
     </VStack>
   );
 };
diff --git a/clients/admin-ui/src/features/datastore-connections/add-connection/forms/YamlEditorForm.tsx b/clients/admin-ui/src/features/datastore-connections/add-connection/forms/YamlEditorForm.tsx
index 0dc274051b..70e850d987 100644
--- a/clients/admin-ui/src/features/datastore-connections/add-connection/forms/YamlEditorForm.tsx
+++ b/clients/admin-ui/src/features/datastore-connections/add-connection/forms/YamlEditorForm.tsx
@@ -3,6 +3,7 @@ import {
   AntButton as Button,
   ConfirmationModal,
   Flex,
+  HStack,
   Text,
   useDisclosure,
   VStack,
@@ -112,7 +113,7 @@ const YamlEditorForm = ({
           }}
           theme="light"
         />
-        <div>
+        <HStack justifyContent="flex-end" pr={6}>
           {onCancel && <Button onClick={onCancel}>Cancel</Button>}
           <Button
             type="primary"
@@ -124,7 +125,7 @@ const YamlEditorForm = ({
           >
             Save
           </Button>
-        </div>
+        </HStack>
       </VStack>
       {isTouched && (isEmptyState || yamlError) && (
         <YamlError isEmptyState={isEmptyState} yamlError={yamlError} />
diff --git a/clients/admin-ui/src/features/datastore-connections/filters/ConnectionTypeFilter.tsx b/clients/admin-ui/src/features/datastore-connections/filters/ConnectionTypeFilter.tsx
index 5528e9afe4..fd05c56eef 100644
--- a/clients/admin-ui/src/features/datastore-connections/filters/ConnectionTypeFilter.tsx
+++ b/clients/admin-ui/src/features/datastore-connections/filters/ConnectionTypeFilter.tsx
@@ -1,7 +1,7 @@
-import MultiSelectDropdown from "common/dropdown/MultiSelectDropdown";
-import React, { useCallback, useMemo } from "react";
+import { useCallback, useMemo } from "react";
 
 import { useAppDispatch, useAppSelector } from "~/app/hooks";
+import { FilterSelect } from "~/features/common/dropdown/FilterSelect";
 import { selectConnectionTypeState } from "~/features/connection-type";
 
 import {
@@ -9,11 +9,7 @@ import {
   setConnectionType,
 } from "../datastore-connection.slice";
 
-export type ConnectionTypeFilterProps = {
-  width?: string;
-};
-
-const ConnectionTypeFilter = ({ width }: ConnectionTypeFilterProps) => {
+const ConnectionTypeFilter = () => {
   const { connectionOptions } = useAppSelector(selectConnectionTypeState);
 
   // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -33,7 +29,7 @@ const ConnectionTypeFilter = ({ width }: ConnectionTypeFilterProps) => {
   }, [connectionOptions, connection_type]);
 
   const list = useMemo(() => loadList(), [loadList]);
-  const selectedList = new Map([...list].filter(([, v]) => v === true));
+  const options = [...list].map(([key]) => ({ value: key }));
 
   // Hooks
   const dispatch = useAppDispatch();
@@ -47,13 +43,13 @@ const ConnectionTypeFilter = ({ width }: ConnectionTypeFilterProps) => {
   };
 
   return (
-    <MultiSelectDropdown
-      label="Connection Type"
-      list={list}
+    <FilterSelect
+      mode="multiple"
+      placeholder="Connection Type"
+      options={options}
       onChange={handleChange}
-      selectedList={selectedList}
-      tooltipDisabled
-      width={width}
+      defaultValue={connection_type?.length ? connection_type : []}
+      className="w-60"
     />
   );
 };
diff --git a/clients/admin-ui/src/features/datastore-connections/filters/DisabledStatusFilter.tsx b/clients/admin-ui/src/features/datastore-connections/filters/DisabledStatusFilter.tsx
index eb102d1bdd..a4dd56adb2 100644
--- a/clients/admin-ui/src/features/datastore-connections/filters/DisabledStatusFilter.tsx
+++ b/clients/admin-ui/src/features/datastore-connections/filters/DisabledStatusFilter.tsx
@@ -1,10 +1,10 @@
-import SelectDropdown from "common/dropdown/SelectDropdown";
 import { ItemOption } from "common/dropdown/types";
 import { capitalize } from "common/utils";
-import { Box } from "fidesui";
 import React, { useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 
+import { FilterSelect } from "~/features/common/dropdown/FilterSelect";
+
 import { DisabledStatus } from "../constants";
 import {
   selectDatastoreConnectionFilters,
@@ -25,6 +25,12 @@ const DisabledStatusFilter = () => {
   };
 
   const list = useMemo(() => loadList(), []);
+  const options = [...list].map(([key, value]) => {
+    return {
+      value: value.value,
+      label: key,
+    };
+  });
 
   // Hooks
   const dispatch = useDispatch();
@@ -35,14 +41,12 @@ const DisabledStatusFilter = () => {
   };
 
   return (
-    <Box>
-      <SelectDropdown
-        label="Status"
-        list={list}
-        onChange={handleChange}
-        selectedValue={disabled_status?.toString()}
-      />
-    </Box>
+    <FilterSelect
+      placeholder="Status"
+      options={options}
+      onChange={handleChange}
+      defaultValue={disabled_status?.toString() || undefined}
+    />
   );
 };
 
diff --git a/clients/admin-ui/src/features/datastore-connections/filters/SystemTypeFilter.tsx b/clients/admin-ui/src/features/datastore-connections/filters/SystemTypeFilter.tsx
index 166e87acd0..ce864d36d6 100644
--- a/clients/admin-ui/src/features/datastore-connections/filters/SystemTypeFilter.tsx
+++ b/clients/admin-ui/src/features/datastore-connections/filters/SystemTypeFilter.tsx
@@ -1,9 +1,8 @@
-import SelectDropdown from "common/dropdown/SelectDropdown";
-import { Box } from "fidesui";
 import React from "react";
 import { useSelector } from "react-redux";
 
 import { useAppDispatch } from "~/app/hooks";
+import { FilterSelect } from "~/features/common/dropdown/FilterSelect";
 
 import { CONNECTION_TYPE_FILTER_MAP } from "../add-connection/constants";
 import {
@@ -17,6 +16,12 @@ const SystemTypeFilter = () => {
 
   const list = new Map(CONNECTION_TYPE_FILTER_MAP);
   list.delete("Show all");
+  const options = [...list].map(([key, value]) => {
+    return {
+      value: value.value,
+      label: key,
+    };
+  });
 
   // Hooks
   const dispatch = useAppDispatch();
@@ -27,15 +32,12 @@ const SystemTypeFilter = () => {
   };
 
   return (
-    <Box>
-      <SelectDropdown
-        enableSorting={false}
-        label="System Type"
-        list={list}
-        onChange={handleChange}
-        selectedValue={system_type?.toString()}
-      />
-    </Box>
+    <FilterSelect
+      placeholder="System Type"
+      options={options}
+      onChange={handleChange}
+      defaultValue={system_type?.toString() || undefined}
+    />
   );
 };
 
diff --git a/clients/admin-ui/src/features/datastore-connections/filters/TestingStatusFilter.tsx b/clients/admin-ui/src/features/datastore-connections/filters/TestingStatusFilter.tsx
index fea2721d9d..ab45c0ddce 100644
--- a/clients/admin-ui/src/features/datastore-connections/filters/TestingStatusFilter.tsx
+++ b/clients/admin-ui/src/features/datastore-connections/filters/TestingStatusFilter.tsx
@@ -1,10 +1,10 @@
-import SelectDropdown from "common/dropdown/SelectDropdown";
 import { ItemOption } from "common/dropdown/types";
 import { capitalize } from "common/utils";
-import { Box } from "fidesui";
 import React, { useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 
+import { FilterSelect } from "~/features/common/dropdown/FilterSelect";
+
 import { TestingStatus } from "../constants";
 import {
   selectDatastoreConnectionFilters,
@@ -25,6 +25,12 @@ const TestingStatusFilter = () => {
   };
 
   const list = useMemo(() => loadList(), []);
+  const options = [...list].map(([key, value]) => {
+    return {
+      value: value.value,
+      label: key,
+    };
+  });
 
   // Hooks
   const dispatch = useDispatch();
@@ -35,14 +41,12 @@ const TestingStatusFilter = () => {
   };
 
   return (
-    <Box>
-      <SelectDropdown
-        label="Testing Status"
-        list={list}
-        onChange={handleChange}
-        selectedValue={test_status?.toString()}
-      />
-    </Box>
+    <FilterSelect
+      placeholder="Testing Status"
+      options={options}
+      onChange={handleChange}
+      defaultValue={test_status?.toString() || undefined}
+    />
   );
 };
 
diff --git a/clients/admin-ui/src/features/datastore-connections/system_portal_config/ConsentAutomationForm.tsx b/clients/admin-ui/src/features/datastore-connections/system_portal_config/ConsentAutomationForm.tsx
index 3b2126cafb..ab4c9f4784 100644
--- a/clients/admin-ui/src/features/datastore-connections/system_portal_config/ConsentAutomationForm.tsx
+++ b/clients/admin-ui/src/features/datastore-connections/system_portal_config/ConsentAutomationForm.tsx
@@ -5,6 +5,7 @@ import {
   AccordionItem,
   AccordionPanel,
   AntButton as Button,
+  AntSelect as Select,
   ArrowDownRightIcon,
   Box,
   BoxProps,
@@ -15,11 +16,11 @@ import {
   Text,
   useToast,
 } from "fidesui";
-import { Form, Formik, FormikValues } from "formik";
+import { Form, Formik, FormikValues, useField } from "formik";
 import { Fragment, useEffect, useMemo, useState } from "react";
 
 import { useAppSelector } from "~/app/hooks";
-import { Option, SelectInput } from "~/features/common/form/inputs";
+import { Option } from "~/features/common/form/inputs";
 import { errorToastParams } from "~/features/common/toast";
 import {
   useGetConsentableItemsQuery,
@@ -51,12 +52,20 @@ const ConsentableItemField = ({
 }: ConsentableItemFieldProps) => {
   const { external_id: id, name } = item;
   const fieldName = `${id}-notice_id`;
+  const [field, , helpers] = useField(fieldName);
+  const { setValue } = helpers;
+  const handleChange = (option?: string) => {
+    setValue(option);
+    // eslint-disable-next-line no-param-reassign
+    item = { ...item, notice_id: option };
+    onNoticeChange(item);
+  };
   return (
     <>
       <HStack flexGrow={1}>
         {isChild && <ArrowDownRightIcon />}
         <FormLabel
-          id={`${id}-label`}
+          htmlFor={fieldName}
           data-testid={`consentable-item-label${isChild ? "-child" : ""}`}
           m={0}
           fontSize="14px"
@@ -65,23 +74,16 @@ const ConsentableItemField = ({
           {name}
         </FormLabel>
       </HStack>
-      <Box data-testid="consentable-item-select">
-        <SelectInput
-          placeholder="None"
-          size="sm"
-          fieldName={fieldName}
-          options={options}
-          ariaLabel="Notices"
-          ariaDescribedby={`${id}-label`}
-          isClearable
-          onChange={(option: Option | undefined) => {
-            const value = option?.value;
-            // eslint-disable-next-line no-param-reassign
-            item = { ...item, notice_id: value };
-            onNoticeChange(item);
-          }}
-        />
-      </Box>
+      <Select<string, Option>
+        {...field}
+        id={fieldName}
+        allowClear
+        placeholder="None"
+        options={options}
+        onChange={handleChange}
+        className="w-full"
+        data-testid="consentable-item-select"
+      />
     </>
   );
 };
diff --git a/clients/admin-ui/src/features/datastore-connections/system_portal_config/forms/SelectDataset.tsx b/clients/admin-ui/src/features/datastore-connections/system_portal_config/forms/SelectDataset.tsx
index 60edbeedba..63cbe81d02 100644
--- a/clients/admin-ui/src/features/datastore-connections/system_portal_config/forms/SelectDataset.tsx
+++ b/clients/admin-ui/src/features/datastore-connections/system_portal_config/forms/SelectDataset.tsx
@@ -1,4 +1,5 @@
 import {
+  AntSelect as Select,
   Box,
   CircleHelpIcon,
   Flex,
@@ -10,10 +11,11 @@ import {
 } from "fidesui";
 import { useField } from "formik";
 
-import { Option, SelectInput } from "~/features/common/form/inputs";
+import { Option } from "~/features/common/form/inputs";
 
 const SelectDataset = ({ options }: { options?: Option[] }) => {
-  const [, { error }] = useField("dataset");
+  const [field, { error }, helpers] = useField("dataset");
+  const { setValue } = helpers;
   return (
     <FormControl display="flex">
       <FormLabel
@@ -27,12 +29,15 @@ const SelectDataset = ({ options }: { options?: Option[] }) => {
       </FormLabel>
       <VStack align="flex-start" w="100%">
         <Box w="full">
-          <SelectInput
-            fieldName="dataset"
+          <Select
+            {...field}
+            id="dataset"
+            placeholder="Select datasets..."
             options={options}
-            isMulti
-            size="sm"
-            isSearchable
+            onChange={(v) => setValue(v)}
+            mode="multiple"
+            showSearch
+            className="w-full"
           />
         </Box>
         <FormErrorMessage>{error}</FormErrorMessage>
diff --git a/clients/admin-ui/src/features/messaging-templates/AddMessagingTemplateModal.tsx b/clients/admin-ui/src/features/messaging-templates/AddMessagingTemplateModal.tsx
index 48b5a4e5c1..0d7076a734 100644
--- a/clients/admin-ui/src/features/messaging-templates/AddMessagingTemplateModal.tsx
+++ b/clients/admin-ui/src/features/messaging-templates/AddMessagingTemplateModal.tsx
@@ -1,6 +1,6 @@
-import { Select, SingleValue } from "chakra-react-select";
 import {
   AntButton as Button,
+  AntSelect as Select,
   Box,
   Modal,
   ModalBody,
@@ -12,7 +12,6 @@ import {
 } from "fidesui";
 import { useState } from "react";
 
-import { SELECT_STYLES } from "~/features/common/form/inputs";
 import { CustomizableMessagingTemplatesEnum } from "~/features/messaging-templates/CustomizableMessagingTemplatesEnum";
 import CustomizableMessagingTemplatesLabelEnum from "~/features/messaging-templates/CustomizableMessagingTemplatesLabelEnum";
 
@@ -68,14 +67,12 @@ const AddMessagingTemplateModal = ({
           </Text>
 
           <Box data-testid="template-type-selector">
-            <Select
+            <Select<string>
               options={options}
-              size="sm"
-              chakraStyles={SELECT_STYLES}
-              onChange={(option: SingleValue<any>) => {
-                setSelectedTemplateType(option?.value);
+              onChange={(value) => {
+                setSelectedTemplateType(value);
               }}
-              classNamePrefix="custom-select"
+              className="w-full"
             />
           </Box>
         </ModalBody>
diff --git a/clients/admin-ui/src/features/privacy-notices/PrivacyNoticeForm.tsx b/clients/admin-ui/src/features/privacy-notices/PrivacyNoticeForm.tsx
index 3c45cd727f..53b417203d 100644
--- a/clients/admin-ui/src/features/privacy-notices/PrivacyNoticeForm.tsx
+++ b/clients/admin-ui/src/features/privacy-notices/PrivacyNoticeForm.tsx
@@ -1,7 +1,8 @@
-import { Select } from "chakra-react-select";
 import ScrollableList from "common/ScrollableList";
 import {
   AntButton as Button,
+  AntSpace as Space,
+  AntTag as Tag,
   Box,
   Divider,
   Flex,
@@ -20,7 +21,6 @@ import {
   CustomSelect,
   CustomSwitch,
   CustomTextInput,
-  SELECT_STYLES,
 } from "~/features/common/form/inputs";
 import { getErrorMessage, isErrorResult } from "~/features/common/helpers";
 import { PRIVACY_NOTICES_ROUTE } from "~/features/common/nav/v2/routes";
@@ -77,30 +77,12 @@ const PrivacyNoticeLocationDisplay = ({
       {tooltip ? <QuestionTooltip label={tooltip} /> : null}
     </Flex>
     <Box w="100%" data-testid="notice-locations">
-      <Select
-        chakraStyles={{
-          ...SELECT_STYLES,
-          dropdownIndicator: (provided) => ({
-            ...provided,
-            display: "none",
-          }),
-          multiValueRemove: (provided) => ({
-            ...provided,
-            display: "none",
-          }),
-        }}
-        classNamePrefix="notice-locations"
-        size="sm"
-        isMulti
-        isDisabled
-        placeholder="No locations assigned"
-        value={
-          regions?.map((r) => ({
-            label: PRIVACY_NOTICE_REGION_RECORD[r],
-            value: r,
-          })) ?? []
-        }
-      />
+      <Space size={[0, 2]} wrap>
+        {regions?.map((r) => (
+          <Tag key={r}>{PRIVACY_NOTICE_REGION_RECORD[r]}</Tag>
+        ))}
+        {!regions?.length && <Tag>No locations assigned</Tag>}
+      </Space>
     </Box>
   </VStack>
 );
diff --git a/clients/admin-ui/src/features/privacy-notices/PrivacyNoticeTranslationForm.tsx b/clients/admin-ui/src/features/privacy-notices/PrivacyNoticeTranslationForm.tsx
index ce059a3188..03c56249cc 100644
--- a/clients/admin-ui/src/features/privacy-notices/PrivacyNoticeTranslationForm.tsx
+++ b/clients/admin-ui/src/features/privacy-notices/PrivacyNoticeTranslationForm.tsx
@@ -1,6 +1,6 @@
-import { Select } from "chakra-react-select";
 import {
   AntButton as Button,
+  AntSelect as Select,
   Box,
   DeleteIcon,
   Flex,
@@ -19,11 +19,7 @@ import { useState } from "react";
 
 import { useAppSelector } from "~/app/hooks";
 import FormSection from "~/features/common/form/FormSection";
-import {
-  CustomTextArea,
-  CustomTextInput,
-  SELECT_STYLES,
-} from "~/features/common/form/inputs";
+import { CustomTextArea, CustomTextInput } from "~/features/common/form/inputs";
 import {
   selectAllLanguages,
   selectPage,
@@ -212,20 +208,19 @@ const PrivacyNoticeTranslationForm = ({
               ))}
             </VStack>
           </TabList>
-          {isSelectingLanguage ? (
-            <Box w="full" data-testid="select-language">
-              <Select
-                chakraStyles={SELECT_STYLES}
-                size="sm"
-                options={languageOptions}
-                onChange={(e: any) => handleCreateLanguage(e.value)}
-                autoFocus
-                classNamePrefix="select-language"
-                menuPlacement="auto"
-              />
-            </Box>
-          ) : null}
-          {!isSelectingLanguage && languageOptions.length ? (
+          {isSelectingLanguage && (
+            <Select
+              autoFocus
+              defaultOpen
+              allowClear
+              placeholder="Select a language..."
+              options={languageOptions}
+              onChange={handleCreateLanguage}
+              data-testid="select-language"
+              className="w-full"
+            />
+          )}
+          {!isSelectingLanguage && !!languageOptions.length && (
             <Button
               icon={<SmallAddIcon boxSize={6} />}
               onClick={() => setIsSelectingLanguage(true)}
@@ -234,7 +229,7 @@ const PrivacyNoticeTranslationForm = ({
             >
               Add a language
             </Button>
-          ) : null}
+          )}
         </VStack>
         <Box w="100%">
           <FieldArray
diff --git a/clients/admin-ui/src/features/system/SystemInformationForm.tsx b/clients/admin-ui/src/features/system/SystemInformationForm.tsx
index 9d289ecc92..941a5769b9 100644
--- a/clients/admin-ui/src/features/system/SystemInformationForm.tsx
+++ b/clients/admin-ui/src/features/system/SystemInformationForm.tsx
@@ -43,7 +43,6 @@ import {
   setSuggestions,
 } from "~/features/system/dictionary-form/dict-suggestion.slice";
 import {
-  DictSuggestionCreatableSelect,
   DictSuggestionNumberInput,
   DictSuggestionSelect,
   DictSuggestionSwitch,
@@ -347,7 +346,8 @@ const SystemInformationForm = ({
                 tooltip="What services does this system perform?"
                 disabled={lockedForGVL}
               />
-              <DictSuggestionCreatableSelect
+              <DictSuggestionSelect
+                mode="tags"
                 id="tags"
                 name="tags"
                 label="System Tags"
@@ -360,8 +360,8 @@ const SystemInformationForm = ({
                     : []
                 }
                 tooltip="Are there any tags to associate with this system?"
-                isMulti
                 disabled={lockedForGVL}
+                className="w-full"
               />
             </SystemFormInputGroup>
             <SystemFormInputGroup heading="Dataset reference">
@@ -441,7 +441,6 @@ const SystemInformationForm = ({
                             label="Legal basis for profiling"
                             options={legalBasisForProfilingOptions}
                             tooltip="What is the legal basis under which profiling is performed?"
-                            isMulti
                             disabled={lockedForGVL}
                             isRequired={values.uses_profiling}
                           />
@@ -468,7 +467,6 @@ const SystemInformationForm = ({
                             label="Legal basis for transfer"
                             options={legalBasisForTransferOptions}
                             tooltip="What is the legal basis under which the data is transferred?"
-                            isMulti
                             isRequired={values.does_international_transfers}
                             disabled={lockedForGVL}
                           />
@@ -583,7 +581,6 @@ const SystemInformationForm = ({
                   name="responsibility"
                   options={responsibilityOptions}
                   tooltip="What is the role of the business with regard to data processing?"
-                  isMulti
                   disabled={
                     !values.processes_personal_data ||
                     values.exempt_from_privacy_regulations ||
diff --git a/clients/admin-ui/src/features/system/VendorSelector.tsx b/clients/admin-ui/src/features/system/VendorSelector.tsx
index 834ecccdd5..cc4447dfd0 100644
--- a/clients/admin-ui/src/features/system/VendorSelector.tsx
+++ b/clients/admin-ui/src/features/system/VendorSelector.tsx
@@ -192,6 +192,7 @@ const VendorSelector = ({
       setSearchParam(suggestions[0].label);
       setFieldValue("vendor_id", suggestions[0].value);
       await setValue(suggestions[0].label);
+      onVendorSelected(suggestions[0].value);
     } else {
       setFieldValue("vendor_id", undefined);
       await setValue(searchParam);
diff --git a/clients/admin-ui/src/features/system/dictionary-form/DictSuggestionInputs.tsx b/clients/admin-ui/src/features/system/dictionary-form/DictSuggestionInputs.tsx
index ed9ab0e148..917d0fbfba 100644
--- a/clients/admin-ui/src/features/system/dictionary-form/DictSuggestionInputs.tsx
+++ b/clients/admin-ui/src/features/system/dictionary-form/DictSuggestionInputs.tsx
@@ -1,10 +1,6 @@
 import {
-  CreatableSelect,
-  MultiValue,
-  Select,
-  SingleValue,
-} from "chakra-react-select";
-import {
+  AntSelect as Select,
+  AntSelectProps,
   AntSwitch as Switch,
   Box,
   Flex,
@@ -255,52 +251,37 @@ interface SelectOption {
   label: string;
 }
 
-type SelectProps = Props & {
-  options: SelectOption[];
-  isMulti?: boolean;
-};
+type SelectProps = Props &
+  AntSelectProps & {
+    options: SelectOption[];
+    mode?: "multiple" | "tags";
+  };
 
 export const DictSuggestionSelect = ({
+  mode = "multiple",
   label,
   tooltip,
   disabled,
   isRequired = false,
   dictField,
   name,
-  placeholder,
+  placeholder = "Select...",
   id,
   options,
-  isMulti = false,
 }: SelectProps) => {
-  const { field, isInvalid, isShowingSuggestions, error } = useDictSuggestion(
-    name,
-    dictField,
-  );
+  const { field, isInvalid, error } = useDictSuggestion(name, dictField);
+  const [searchValue, setSearchValue] = useState("");
 
-  const selected = isMulti
-    ? options.filter((o) => field.value.indexOf(o.value) >= 0)
-    : options.find((o) => o.value === field.value) || null;
+  if (mode === "tags" && typeof field.value === "string") {
+    field.value = [field.value];
+  }
 
   const { setFieldValue } = useFormikContext();
 
-  const handleChangeMulti = (newValue: MultiValue<SelectOption>) => {
-    setFieldValue(
-      field.name,
-      newValue.map((v) => v.value),
-    );
-  };
-
-  const handleChangeSingle = (newValue: SingleValue<SelectOption>) => {
+  const handleChange = (newValue: SelectOption) => {
     setFieldValue(field.name, newValue);
   };
 
-  const handleChange = (
-    newValue: MultiValue<SelectOption> | SingleValue<SelectOption>,
-  ) =>
-    isMulti
-      ? handleChangeMulti(newValue as MultiValue<SelectOption>)
-      : handleChangeSingle(newValue as SingleValue<SelectOption>);
-
   return (
     <FormControl isInvalid={isInvalid} isRequired={isRequired}>
       <VStack alignItems="start">
@@ -310,197 +291,32 @@ export const DictSuggestionSelect = ({
           </Label>
           {tooltip ? <QuestionTooltip label={tooltip} /> : null}
         </Flex>
-        <Flex width="100%">
-          <Select
+        <Flex width="100%" flexDir="column">
+          <Select<SelectOption, SelectOption>
             {...field}
-            size="sm"
-            value={selected}
-            isDisabled={disabled}
-            isMulti={isMulti}
-            onChange={handleChange}
-            data-testid={`input-${field.name}`}
+            id={id || name}
+            showSearch
+            mode={mode}
             placeholder={placeholder}
             options={options}
-            focusBorderColor="primary.600"
-            chakraStyles={{
-              input: (provided) => ({
-                ...provided,
-                color:
-                  isShowingSuggestions === "showing"
-                    ? "complimentary.500"
-                    : "gray.800",
-              }),
-              container: (provided) => ({
-                ...provided,
-                flexGrow: 1,
-                backgroundColor: "white",
-              }),
-              dropdownIndicator: (provided) => ({
-                ...provided,
-                bg: "transparent",
-                px: 2,
-                cursor: "inherit",
-              }),
-              indicatorSeparator: (provided) => ({
-                ...provided,
-                display: "none",
-              }),
-              multiValueLabel: (provided) => ({
-                ...provided,
-                display: "flex",
-                height: "16px",
-                alignItems: "center",
-              }),
-              multiValue: (provided) => ({
-                ...provided,
-                fontWeight: "400",
-                background: "gray.200",
-                color:
-                  isShowingSuggestions === "showing"
-                    ? "complimentary.500"
-                    : "gray.800",
-                borderRadius: "2px",
-                py: 1,
-                px: 2,
-              }),
-              multiValueRemove: (provided) => ({
-                ...provided,
-                ml: 1,
-                size: "lg",
-                width: 3,
-                height: 3,
-              }),
-            }}
-          />
-        </Flex>
-        <ErrorMessage
-          isInvalid={isInvalid}
-          message={error}
-          fieldName={field.name}
-        />
-      </VStack>
-    </FormControl>
-  );
-};
-
-export const DictSuggestionCreatableSelect = ({
-  label,
-  tooltip,
-  disabled,
-  isRequired = false,
-  dictField,
-  name,
-  placeholder,
-  id,
-  options,
-  isMulti = false,
-}: SelectProps) => {
-  const { field, isInvalid, isShowingSuggestions, error } = useDictSuggestion(
-    name,
-    dictField,
-  );
-
-  const selected =
-    field.value.length > 0
-      ? field.value.map(
-          (fieldValue: string) =>
-            options.find((o) => o.value === fieldValue) ?? {
-              value: fieldValue,
-              label: fieldValue,
-            },
-        )
-      : [];
-
-  const { setFieldValue } = useFormikContext();
-
-  const handleChangeMulti = (newValue: MultiValue<SelectOption>) => {
-    setFieldValue(
-      field.name,
-      newValue.map((v) => v.value),
-    );
-  };
-
-  const handleChangeSingle = (newValue: SingleValue<SelectOption>) => {
-    setFieldValue(field.name, newValue);
-  };
-
-  const handleChange = (
-    newValue: MultiValue<SelectOption> | SingleValue<SelectOption>,
-  ) =>
-    isMulti
-      ? handleChangeMulti(newValue as MultiValue<SelectOption>)
-      : handleChangeSingle(newValue as SingleValue<SelectOption>);
-
-  return (
-    <FormControl isInvalid={isInvalid} isRequired={isRequired}>
-      <VStack alignItems="start">
-        <Flex alignItems="center">
-          <Label htmlFor={id || name} fontSize="xs" my={0} mr={1}>
-            {label}
-          </Label>
-          {tooltip ? <QuestionTooltip label={tooltip} /> : null}
-        </Flex>
-        <Flex width="100%">
-          <CreatableSelect
-            {...field}
-            size="sm"
-            value={selected}
-            isDisabled={disabled}
-            isMulti={isMulti}
+            optionRender={
+              mode === "tags"
+                ? (option) => {
+                    if (
+                      option.value === searchValue &&
+                      !field.value.includes(searchValue)
+                    ) {
+                      return `Create "${searchValue}"`;
+                    }
+                    return option.label;
+                  }
+                : undefined
+            }
+            value={field.value || []}
             onChange={handleChange}
+            disabled={disabled}
             data-testid={`input-${field.name}`}
-            placeholder={placeholder}
-            options={options}
-            focusBorderColor="primary.600"
-            chakraStyles={{
-              input: (provided) => ({
-                ...provided,
-                color:
-                  isShowingSuggestions === "showing"
-                    ? "complimentary.500"
-                    : "gray.800",
-              }),
-              container: (provided) => ({
-                ...provided,
-                flexGrow: 1,
-                backgroundColor: "white",
-              }),
-              dropdownIndicator: (provided) => ({
-                ...provided,
-                bg: "transparent",
-                px: 2,
-                cursor: "inherit",
-              }),
-              indicatorSeparator: (provided) => ({
-                ...provided,
-                display: "none",
-              }),
-              multiValueLabel: (provided) => ({
-                ...provided,
-                display: "flex",
-                height: "16px",
-                alignItems: "center",
-              }),
-              multiValue: (provided) => ({
-                ...provided,
-                fontWeight: "400",
-                background: "gray.200",
-                color:
-                  isShowingSuggestions === "showing"
-                    ? "complimentary.500"
-                    : "gray.800",
-                borderRadius: "2px",
-                py: 1,
-                px: 2,
-              }),
-              multiValueRemove: (provided) => ({
-                ...provided,
-                ml: 1,
-                size: "lg",
-                width: 3,
-                height: 3,
-              }),
-            }}
+            onSearch={setSearchValue}
           />
         </Flex>
         <ErrorMessage
diff --git a/clients/admin-ui/src/pages/datastore-connection/[id].tsx b/clients/admin-ui/src/pages/datastore-connection/[id].tsx
index 95ab948240..b9ae33e80a 100644
--- a/clients/admin-ui/src/pages/datastore-connection/[id].tsx
+++ b/clients/admin-ui/src/pages/datastore-connection/[id].tsx
@@ -24,9 +24,9 @@ import {
 const EditDatastoreConnection: NextPage = () => {
   const dispatch = useAppDispatch();
   const router = useRouter();
+  const { id } = router.query;
   const { errorAlert } = useAlert();
   const connectionOptions = useAppSelector(selectConnectionTypes);
-  const [isFetching, setIsFetching] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
 
   const getConnectionOption = (
@@ -50,7 +50,6 @@ const EditDatastoreConnection: NextPage = () => {
 
     const fetchConnectionData = async (key: string) => {
       try {
-        setIsFetching(true);
         const promises: any[] = [];
         promises.push(
           dispatch(
@@ -81,7 +80,6 @@ const EditDatastoreConnection: NextPage = () => {
             options,
           );
           dispatch(setConnectionOption(item));
-          setIsFetching(false);
           setIsLoading(false);
         } else {
           handleError();
@@ -91,13 +89,13 @@ const EditDatastoreConnection: NextPage = () => {
       }
     };
 
-    const { id } = router.query;
-    if (id && !isFetching && isLoading) {
+    if (id) {
       fetchConnectionData(id as string);
     }
 
     return () => {};
-  }, [connectionOptions, dispatch, errorAlert, isFetching, isLoading, router]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
 
   return (
     <>
diff --git a/clients/fidesui/src/hoc/CustomSelect.tsx b/clients/fidesui/src/hoc/CustomSelect.tsx
new file mode 100644
index 0000000000..fe818f6ccd
--- /dev/null
+++ b/clients/fidesui/src/hoc/CustomSelect.tsx
@@ -0,0 +1,19 @@
+import { ChevronDown } from "@carbon/icons-react";
+import type { SelectProps } from "antd/lib";
+import { Select } from "antd/lib";
+import { BaseOptionType, DefaultOptionType } from "antd/lib/select";
+import React from "react";
+
+/**
+ * Higher-order component that adds a custom arrow icon to the Select component.
+ */
+const withCustomArrowIcon = (WrappedComponent: typeof Select) => {
+  return function SpecifyCustomIcon<
+    ValueType = any,
+    OptionType extends DefaultOptionType | BaseOptionType = DefaultOptionType,
+  >(props: SelectProps<ValueType, OptionType>) {
+    return <WrappedComponent suffixIcon={<ChevronDown />} {...props} />;
+  };
+};
+
+export const CustomSelect = withCustomArrowIcon(Select);
diff --git a/clients/fidesui/src/hoc/index.tsx b/clients/fidesui/src/hoc/index.tsx
new file mode 100644
index 0000000000..afaf65b18a
--- /dev/null
+++ b/clients/fidesui/src/hoc/index.tsx
@@ -0,0 +1 @@
+export * from "./CustomSelect";
diff --git a/clients/fidesui/src/index.ts b/clients/fidesui/src/index.ts
index 8cffbf8351..045fee2d56 100644
--- a/clients/fidesui/src/index.ts
+++ b/clients/fidesui/src/index.ts
@@ -6,25 +6,34 @@ export * from "@chakra-ui/utils";
 
 // Unmodified component exported directly from Ant Design
 export type { ThemeConfig as AntThemeConfig } from "antd/es";
-export type { SwitchProps as AntSwitchProps } from "antd/lib";
-export type { ButtonProps as AntButtonProps } from "antd/lib";
-export type { InputProps as AntInputProps } from "antd/lib";
-export type { GetProps } from "antd/lib";
-export { Layout as AntLayout } from "antd/lib";
-export { Space as AntSpace } from "antd/lib";
-export { Flex as AntFlex } from "antd/lib";
-export { Col as AntCol, Row as AntRow } from "antd/lib";
-export { Typography as AntTypography } from "antd/lib";
-export { Card as AntCard } from "antd/lib";
-export { Button as AntButton } from "antd/lib";
-export { Switch as AntSwitch } from "antd/lib";
-export { Select as AntSelect } from "antd/lib";
-export { Tooltip as AntTooltip } from "antd/lib";
-export { Alert as AntAlert } from "antd/lib";
-export { Tag as AntTag } from "antd/lib";
-export { Input as AntInput } from "antd/lib";
-export { Checkbox as AntCheckbox } from "antd/lib";
-export { Radio as AntRadio } from "antd/lib";
+export type {
+  ButtonProps as AntButtonProps,
+  InputProps as AntInputProps,
+  SelectProps as AntSelectProps,
+  SwitchProps as AntSwitchProps,
+  GetProps,
+} from "antd/lib";
+export {
+  Alert as AntAlert,
+  Button as AntButton,
+  Card as AntCard,
+  Checkbox as AntCheckbox,
+  Col as AntCol,
+  Divider as AntDivider,
+  Flex as AntFlex,
+  Input as AntInput,
+  Layout as AntLayout,
+  Radio as AntRadio,
+  Row as AntRow,
+  Space as AntSpace,
+  Switch as AntSwitch,
+  Tag as AntTag,
+  Tooltip as AntTooltip,
+  Typography as AntTypography,
+} from "antd/lib";
+
+// Higher-order components
+export { CustomSelect as AntSelect } from "./hoc";
 
 /**
  * Custom Re-exports