Fix slack bot form + LLM provider form

eea · Nov 4, 2024 · 8e55566 · 8e55566
1 parent bafb95d
commit 8e55566
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 27 deletions.
diff --git a/web/src/components/admin/connectors/Field.tsx b/web/src/components/admin/connectors/Field.tsx
@@ -25,7 +25,7 @@ import {
 } from "@radix-ui/react-tooltip";
 import ReactMarkdown from "react-markdown";
 import { FaMarkdown } from "react-icons/fa";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import remarkGfm from "remark-gfm";
 import { EditIcon } from "@/components/icons/icons";
 import { Button } from "@/components/ui/button";
@@ -602,6 +602,11 @@ export function SelectorFormField({
 }: SelectorFormFieldProps) {
   const [field] = useField<string>(name);
   const { setFieldValue } = useFormikContext();
+  const [container, setContainer] = useState<HTMLDivElement | null>(null);
+
+  const currentlySelected = options.find(
+    (option) => option.value?.toString() === field.value?.toString()
+  );
 
   return (
     <div>
@@ -612,7 +617,7 @@ export function SelectorFormField({
         </div>
       )}
       {subtext && <SubLabel>{subtext}</SubLabel>}
-      <div className="mt-2">
+      <div className="mt-2" ref={setContainer}>
         <Select
           value={field.value || defaultValue}
           onValueChange={
@@ -622,30 +627,34 @@ export function SelectorFormField({
         >
           <SelectTrigger>
             <SelectValue placeholder="Select...">
-              {field.value || defaultValue || ""}
+              {currentlySelected?.name || defaultValue || ""}
             </SelectValue>
           </SelectTrigger>
-          <SelectContent
-            side={side}
-            className={maxHeight ? `max-h-[${maxHeight}]` : undefined}
-          >
-            {options.length == 0 && (
-              <SelectItem value="default">Select...</SelectItem>
-            )}
-            {defaultValue && (
-              <SelectItem value={defaultValue}>{defaultValue}</SelectItem>
-            )}
-            {options.map((option) => (
-              <SelectItem
-                icon={option.icon}
-                key={option.value}
-                value={String(option.value)}
-                selected={field.value === option.value}
-              >
-                {option.name}
-              </SelectItem>
-            ))}
-          </SelectContent>
+
+          {container && (
+            <SelectContent
+              side={side}
+              className={maxHeight ? `max-h-[${maxHeight}]` : undefined}
+              container={container}
+            >
+              {options.length == 0 && (
+                <SelectItem value="default">Select...</SelectItem>
+              )}
+              {defaultValue && (
+                <SelectItem value={defaultValue}>{defaultValue}</SelectItem>
+              )}
+              {options.map((option) => (
+                <SelectItem
+                  icon={option.icon}
+                  key={option.value}
+                  value={String(option.value)}
+                  selected={field.value === option.value}
+                >
+                  {option.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          )}
         </Select>
       </div>
 

diff --git a/web/src/components/ui/select.tsx b/web/src/components/ui/select.tsx
@@ -69,9 +69,11 @@ SelectScrollDownButton.displayName =
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {
+    container?: HTMLElement | null;
+  }
+>(({ className, children, position = "popper", container, ...props }, ref) => (
+  <SelectPrimitive.Portal container={container}>
     <SelectPrimitive.Content
       ref={ref}
       className={cn(