Fix broken flow binding dialog (keycloak#26336)

Closes keycloak#26335 Signed-off-by: Jon Koops <[email protected]>
tnorimat · Jan 19, 2024 · 972d198 · 972d198
1 parent 229cbb5
commit 972d198
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/js/apps/admin-ui/src/authentication/BindFlowDialog.tsx b/js/apps/admin-ui/src/authentication/BindFlowDialog.tsx
@@ -5,10 +5,12 @@ import {
   ButtonVariant,
   Form,
   Modal,
+  SelectVariant,
 } from "@patternfly/react-core";
 import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { SelectControl } from "ui-shared";
+
 import { adminClient } from "../admin-client";
 import { useAlerts } from "../components/alert/Alerts";
 import { useRealm } from "../context/realm-context/RealmContext";
@@ -45,6 +47,8 @@ export const BindFlowDialog = ({ flowAlias, onClose }: BindFlowDialogProps) => {
     onClose();
   };
 
+  const flowKeys = Array.from(REALM_FLOWS.keys());
+
   return (
     <Modal
       title={t("bindFlow")}
@@ -71,13 +75,15 @@ export const BindFlowDialog = ({ flowAlias, onClose }: BindFlowDialogProps) => {
             id="chooseBindingType"
             name="bindingType"
             label={t("chooseBindingType")}
-            options={[...REALM_FLOWS.keys()]
+            options={flowKeys
               .filter((f) => f !== "dockerAuthenticationFlow")
               .map((key) => ({
                 key,
                 value: t(`flow.${REALM_FLOWS.get(key)}`),
               }))}
-            controller={{ defaultValue: "" }}
+            controller={{ defaultValue: flowKeys[0] }}
+            variant={SelectVariant.single}
+            menuAppendTo="parent"
           />
         </FormProvider>
       </Form>

diff --git a/js/libs/ui-shared/src/controls/SelectControl.tsx b/js/libs/ui-shared/src/controls/SelectControl.tsx
@@ -11,6 +11,7 @@ import {
   Select,
   SelectOption,
   SelectProps,
+  SelectVariant,
   ValidatedOptions,
 } from "@patternfly/react-core";
 import { FormLabel } from "./FormLabel";
@@ -89,10 +90,14 @@ export const SelectControl = <
                 setOpen(false);
               }
             }}
-            onClear={(event) => {
-              event.stopPropagation();
-              onChange([]);
-            }}
+            onClear={
+              variant !== SelectVariant.single
+                ? (event) => {
+                    event.stopPropagation();
+                    onChange([]);
+                  }
+                : undefined
+            }
             isOpen={open}
             variant={variant}
             validated={