From e8ac1e124fac7a63791cd61eecb557934a735929 Mon Sep 17 00:00:00 2001
From: pedroanastacio <pedro.anastacio013@gmail.com>
Date: Mon, 8 Dec 2025 09:30:50 -0300
Subject: [PATCH 1/3] feat: add optional placeholder to rhf combobox

---
 packages/ui/src/components/RhfCombobox/rhf-combobox.tsx       | 2 ++
 packages/ui/src/components/RhfCombobox/rhf-combobox.types.tsx | 1 +
 2 files changed, 3 insertions(+)

diff --git a/packages/ui/src/components/RhfCombobox/rhf-combobox.tsx b/packages/ui/src/components/RhfCombobox/rhf-combobox.tsx
index ef26dea..cf48b54 100644
--- a/packages/ui/src/components/RhfCombobox/rhf-combobox.tsx
+++ b/packages/ui/src/components/RhfCombobox/rhf-combobox.tsx
@@ -56,6 +56,7 @@ export function RhfCombobox<
   name,
   defaultValue,
   label,
+  placeholder,
   error,
   options,
   disabled = false,
@@ -185,6 +186,7 @@ export function RhfCombobox<
         allowCustomValue={allowCustomValue}
         selectionBehavior="preserve"
         defaultValue={[defaultValue || '']}
+        placeholder={placeholder}
         {...slotProps?.root}
       >
         <Combobox.Control>
diff --git a/packages/ui/src/components/RhfCombobox/rhf-combobox.types.tsx b/packages/ui/src/components/RhfCombobox/rhf-combobox.types.tsx
index 27aa513..a0251d4 100644
--- a/packages/ui/src/components/RhfCombobox/rhf-combobox.types.tsx
+++ b/packages/ui/src/components/RhfCombobox/rhf-combobox.types.tsx
@@ -18,6 +18,7 @@ export type RhfComboboxProps<
 > = UseControllerProps<TFieldValues, TName> & {
   options: RhfComboboxOptions[];
   label?: string;
+  placeholder?: string;
   helperText?: string;
   disabled?: boolean;
   error?: FieldError;

From 14c6b1becaa477fed89015c174c6d0c82e0f3ef2 Mon Sep 17 00:00:00 2001
From: pedroanastacio <pedro.anastacio013@gmail.com>
Date: Mon, 8 Dec 2025 11:09:26 -0300
Subject: [PATCH 2/3] fix: prevents options menu from opening when it is empty

---
 .../components/RhfCombobox/rhf-combobox.tsx   | 71 ++++++++++---------
 1 file changed, 39 insertions(+), 32 deletions(-)

diff --git a/packages/ui/src/components/RhfCombobox/rhf-combobox.tsx b/packages/ui/src/components/RhfCombobox/rhf-combobox.tsx
index cf48b54..8aece0a 100644
--- a/packages/ui/src/components/RhfCombobox/rhf-combobox.tsx
+++ b/packages/ui/src/components/RhfCombobox/rhf-combobox.tsx
@@ -154,6 +154,8 @@ export function RhfCombobox<
       }
     : {};
 
+  const showOptions = isLoadingOptions || collection.items.length > 0;
+
   return (
     <Field.Root invalid={!!error}>
       {label && (
@@ -180,7 +182,7 @@ export function RhfCombobox<
         onOpenChange={handleOpenChange}
         onInputValueChange={handleInputValueChange}
         disabled={disabled}
-        openOnClick={openOnFocus}
+        openOnClick={openOnFocus && showOptions}
         multiple={false}
         invalid={!!error}
         allowCustomValue={allowCustomValue}
@@ -208,42 +210,47 @@ export function RhfCombobox<
           </Combobox.IndicatorGroup>
         </Combobox.Control>
 
-        <ComboboxHiddenInput name={rest.name} value={value || ''} />
+        <ComboboxHiddenInput name={rest.name} value={value ?? ''} />
 
         {helperText && <Field.HelperText>{helperText}</Field.HelperText>}
         {error && <Field.ErrorText>{error.message}</Field.ErrorText>}
         <Portal>
           <Combobox.Positioner>
-            <Combobox.Content>
-              {!allowCustomValue && (
-                <Combobox.Empty>{noOptionsText}</Combobox.Empty>
-              )}
-
-              {isLoadingOptions && (
-                <HStack p="2">
-                  <Spinner size="xs" borderWidth="1px" />
-                  <Span>Loading...</Span>
-                </HStack>
-              )}
-
-              {!isLoadingOptions &&
-                collection.items.map((item) => (
-                  <Combobox.Item item={item} key={item.value}>
-                    {!item.imageUrl && item.label}
-                    {item.imageUrl && (
-                      <Flex gap={2} align="center">
-                        <Image
-                          src={item.imageUrl}
-                          boxSize="5"
-                          alt={`${item.label} image`}
-                        />
-                        <Span>{item.label}</Span>
-                      </Flex>
-                    )}
-                    <Combobox.ItemIndicator />
-                  </Combobox.Item>
-                ))}
-            </Combobox.Content>
+            {(showOptions || !allowCustomValue) && (
+              <Combobox.Content>
+                {isLoadingOptions && (
+                  <HStack p="2">
+                    <Spinner size="xs" borderWidth="1px" />
+                    <Span>Loading...</Span>
+                  </HStack>
+                )}
+
+                {!isLoadingOptions &&
+                  collection.items.length > 0 &&
+                  collection.items.map((item) => (
+                    <Combobox.Item item={item} key={item.value}>
+                      {!item.imageUrl && item.label}
+                      {item.imageUrl && (
+                        <Flex gap={2} align="center">
+                          <Image
+                            src={item.imageUrl}
+                            boxSize="5"
+                            alt={`${item.label} image`}
+                          />
+                          <Span>{item.label}</Span>
+                        </Flex>
+                      )}
+                      <Combobox.ItemIndicator />
+                    </Combobox.Item>
+                  ))}
+
+                {!allowCustomValue &&
+                  !isLoadingOptions &&
+                  collection.items.length === 0 && (
+                    <Combobox.Empty>{noOptionsText}</Combobox.Empty>
+                  )}
+              </Combobox.Content>
+            )}
           </Combobox.Positioner>
         </Portal>
       </Combobox.Root>

From 6b8457c662f5283768a50087bcbe37320736eae3 Mon Sep 17 00:00:00 2001
From: pedroanastacio <pedro.anastacio013@gmail.com>
Date: Mon, 8 Dec 2025 11:14:17 -0300
Subject: [PATCH 3/3] chore: adds changeset

---
 .changeset/strong-moles-care.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/strong-moles-care.md

diff --git a/.changeset/strong-moles-care.md b/.changeset/strong-moles-care.md
new file mode 100644
index 0000000..86acfac
--- /dev/null
+++ b/.changeset/strong-moles-care.md
@@ -0,0 +1,5 @@
+---
+"bako-ui": patch
+---
+
+Add optional placeholder and prevent options menu from opening when it is empty