Forcing focus on integration search input (#3917)

CHANGELOG.md

@@ -21,6 +21,7 @@ The types of changes are:
 - Fixed issue when generating masked values for invalid data paths (#3906)[https://github.com/ethyca/fides/pull/3906]
 - Code reload now works when running `nox -s dev` (#3914)[https://github.com/ethyca/fides/pull/3914]
 - Reduce verbosity of privacy center logging further (#3915)[https://github.com/ethyca/fides/pull/3915]
+- Resolved an issue where the integration dropdown input lost focus during typing. (#3917)[https://github.com/ethyca/fides/pull/3917]
 
 ## [2.18.0](https://github.com/ethyca/fides/compare/2.17.0...2.18.0)
 

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

@@ -16,7 +16,7 @@ import {
   Tooltip,
 } from "@fidesui/react";
 import { debounce } from "common/utils";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 
 import { useAppSelector } from "~/app/hooks";
 import {
@@ -143,6 +143,8 @@ const ConnectionListDropdown: React.FC<SelectDropdownProps> = ({
   onChange,
   selectedValue,
 }) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
   // Hooks
   const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
@@ -167,7 +169,8 @@ const ConnectionListDropdown: React.FC<SelectDropdownProps> = ({
   const handleSearchChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       if (event.target.value.length === 0 || event.target.value.length > 1) {
-        setSearchTerm(event.target.value);
+        setSearchTerm(event.target.value.toLowerCase());
+        setTimeout(() => inputRef.current?.focus(), 0);
       }
     },
     []
@@ -229,6 +232,7 @@ const ConnectionListDropdown: React.FC<SelectDropdownProps> = ({
                 <SearchLineIcon color="gray.300" h="17px" w="17px" />
               </InputLeftElement>
               <Input
+                ref={inputRef}
                 autoComplete="off"
                 autoFocus
                 borderRadius="md"