added proper filtering and fixed onToggle (#39555) (#39681)

fixes: #39538


(cherry picked from commit d6ee2ed013)

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

js/apps/admin-ui/src/user-federation/ldap/mappers/LdapMapperDetails.tsx

@@ -4,6 +4,7 @@ import { DirectionType } from "@keycloak/keycloak-admin-client/lib/resources/use
 import {
   HelpItem,
   KeycloakSelect,
+  KeycloakSpinner,
   SelectVariant,
   TextControl,
   useAlerts,
@@ -30,7 +31,6 @@ import {
   DynamicComponents,
 } from "../../../components/dynamic/DynamicComponents";
 import { FormAccess } from "../../../components/form/FormAccess";
-import { KeycloakSpinner } from "@keycloak/keycloak-ui-shared";
 import { ViewHeader } from "../../../components/view-header/ViewHeader";
 import { useRealm } from "../../../context/realm-context/RealmContext";
 import { convertFormValuesToObject, convertToFormValues } from "../../../util";
@@ -52,6 +52,7 @@ export default function LdapMapperDetails() {
   const { addAlert, addError } = useAlerts();
 
   const [isMapperDropdownOpen, setIsMapperDropdownOpen] = useState(false);
+  const [mapperTypeFilter, setMapperTypeFilter] = useState("");
   const [key, setKey] = useState(0);
   const refresh = () => setKey(key + 1);
 
@@ -164,12 +165,22 @@ export default function LdapMapperDetails() {
     name: "providerId",
   });
 
+  const selectItems = () =>
+    (components || [])
+      .filter((c) => c.id.includes(mapperTypeFilter))
+      .map((c) => (
+        <SelectOption key={c.id} value={c.id}>
+          {c.id}
+        </SelectOption>
+      ));
+
   if (!components) {
     return <KeycloakSpinner />;
   }
 
   const isNew = mapperId === "new";
   const mapper = components.find((c) => c.id === mapperType);
+
   return (
     <>
       <DeleteConfirm />
@@ -268,10 +279,12 @@ export default function LdapMapperDetails() {
                     <KeycloakSelect
                       toggleId="kc-providerId"
                       typeAheadAriaLabel={t("mapperType")}
-                      onToggle={() =>
-                        setIsMapperDropdownOpen(!isMapperDropdownOpen)
-                      }
+                      onToggle={setIsMapperDropdownOpen}
                       isOpen={isMapperDropdownOpen}
+                      onFilter={(search) => {
+                        setMapperTypeFilter(search);
+                        return selectItems();
+                      }}
                       onSelect={(value) => {
                         setupForm({
                           providerId: value as string,
@@ -285,17 +298,12 @@ export default function LdapMapperDetails() {
                               ]) || [],
                           ),
                         });
-                        setIsMapperDropdownOpen(false);
                       }}
                       selections={field.value}
                       variant={SelectVariant.typeahead}
                       aria-label={t("selectMapperType")}
                     >
-                      {components.map((c) => (
-                        <SelectOption key={c.id} value={c.id}>
-                          {c.id}
-                        </SelectOption>
-                      ))}
+                      {selectItems()}
                     </KeycloakSelect>
                   )}
                 ></Controller>