LJ-343 Allow search by default in all Selects

CHANGELOG.md

@@ -28,6 +28,7 @@ Changes can also be flagged with a GitHub label for tracking purposes. The URL o
 - Added frequency field to DataHubSchema integration config [#5716](https://github.com/ethyca/fides/pull/5716)
 - Added glossary_node field to DataHubSchema integration config [#5734](https://github.com/ethyca/fides/pull/5734)
 - Added initial support for upcoming "headless" CMP experience type [#5731](https://github.com/ethyca/fides/pull/5731)
+- All Select dropdowns will now allow searching to narrow down the options by default [#5738](https://github.com/ethyca/fides/pull/5738)
 - Exposes privacy notice picker for TCF components [#5730](https://github.com/ethyca/fides/pull/5730)
 
 ### Fixed

clients/admin-ui/src/features/common/ScrollableList.tsx

@@ -121,7 +121,6 @@ const ScrollableListAdd = ({
   return isAdding ? (
     <Box w="full">
       <Select
-        showSearch
         labelInValue
         placeholder="Select..."
         filterOption={(input, option) =>

clients/admin-ui/src/features/common/dropdown/SystemSelect.tsx

@@ -33,10 +33,7 @@ const dropdownRender = (
 };
 
 interface SystemSelectProps
-  extends Omit<
-    SelectProps,
-    "options" | "showSearch" | "filterOption" | "onSearch"
-  > {
+  extends Omit<SelectProps, "options" | "filterOption" | "onSearch"> {
   onAddSystem?: MouseEventHandler<HTMLButtonElement>;
 }
 
@@ -77,7 +74,6 @@ export const SystemSelect = ({ onAddSystem, ...props }: SystemSelectProps) => {
       }
       data-testid="system-select"
       {...props}
-      showSearch
       filterOption={false}
       options={options}
       onSearch={onSearch}

clients/admin-ui/src/features/common/dropdown/TaxonomySelect.tsx

@@ -48,7 +48,6 @@ export const TaxonomySelect = ({
     <Select<string, TaxonomySelectOption>
       options={selectOptions}
       autoFocus
-      showSearch
       variant="borderless"
       optionRender={TaxonomyOption}
       dropdownStyle={{ minWidth: "500px" }}

clients/admin-ui/src/features/datastore-connections/system_portal_config/forms/SelectDataset.tsx

@@ -36,7 +36,6 @@ const SelectDataset = ({ options }: { options?: Option[] }) => {
             options={options}
             onChange={(v) => setValue(v)}
             mode="multiple"
-            showSearch
             className="w-full"
           />
         </Box>

clients/admin-ui/src/features/system/VendorSelector.tsx

@@ -201,7 +201,6 @@ const VendorSelector = ({
         <Box width="100%" className="relative">
           <Select<VendorOption, VendorOption>
             id="vendorName"
-            showSearch
             labelInValue
             autoFocus
             allowClear

clients/fidesui/src/hoc/CustomSelect.tsx

@@ -36,6 +36,7 @@ const withCustomProps = (WrappedComponent: typeof Select) => {
     placeholder = "Select...",
     optionRender = optionDescriptionRender,
     className = "w-full",
+    showSearch = true,
     suffixIcon,
     menuItemSelectedIcon = <Checkmark />,
     ...props
@@ -44,6 +45,7 @@ const withCustomProps = (WrappedComponent: typeof Select) => {
       placeholder,
       optionRender,
       className,
+      showSearch,
       suffixIcon: props.loading ? undefined : suffixIcon || <ChevronDown />,
       menuItemSelectedIcon,
       "data-testid": `select${props.id ? `-${props.id}` : ""}`,