From 7b11c958eb519ac6630b30f877cfeb177c6a30df Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Tue, 21 Jan 2025 18:12:39 -0800
Subject: [PATCH] Fixed dropdown default value and styling issue when text was
 too long

---
 .../components/sub-block/components/dropdown.tsx      | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/w/components/workflow-block/components/sub-block/components/dropdown.tsx b/app/w/components/workflow-block/components/sub-block/components/dropdown.tsx
index 8203251fa0..b31d8c4344 100644
--- a/app/w/components/workflow-block/components/sub-block/components/dropdown.tsx
+++ b/app/w/components/workflow-block/components/sub-block/components/dropdown.tsx
@@ -6,6 +6,7 @@ import {
   SelectValue,
 } from '@/components/ui/select'
 import { useSubBlockValue } from '../hooks/use-sub-block-value'
+import { useEffect } from 'react'
 
 interface DropdownProps {
   options: string[]
@@ -22,12 +23,20 @@ export function Dropdown({
 }: DropdownProps) {
   const [value, setValue] = useSubBlockValue(blockId, subBlockId)
 
+  // Set the value to the first option if it's not set
+  useEffect(() => {
+    if (!value && options.length > 0) {
+      setValue(defaultValue ?? options[0])
+    }
+  }, [value, options, defaultValue, setValue])
+
   return (
     <Select
+      value={value as string | undefined}
       defaultValue={defaultValue ?? options[0]}
       onValueChange={(value) => setValue(value)}
     >
-      <SelectTrigger>
+      <SelectTrigger className="text-left">
         <SelectValue placeholder="Select an option" />
       </SelectTrigger>
       <SelectContent>