From b638f0dc7f04cbb433f416de7a224a52e4eb4d70 Mon Sep 17 00:00:00 2001
From: Leonardo Giacone <leonardo@webiny.com>
Date: Tue, 30 Jul 2024 11:23:16 +0200
Subject: [PATCH] fix(app-headless-cms): pass placeholder to select field
 renderer (#4209)

---
 .../src/admin/plugins/fieldRenderers/select.tsx              | 1 +
 packages/ui/src/Select/Select.tsx                            | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/select.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/select.tsx
index 025d2f766fa..4b3e92d7525 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/select.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/select.tsx
@@ -28,6 +28,7 @@ const plugin: CmsModelFieldRendererPlugin = {
                         label={field.label}
                         description={field.helpText}
                         options={options}
+                        placeholder={field.placeholderText}
                         data-testid={`fr.input.select.${field.label}`}
                     />
                 </Bind>
diff --git a/packages/ui/src/Select/Select.tsx b/packages/ui/src/Select/Select.tsx
index 63d6727107f..6b5f76a42b9 100644
--- a/packages/ui/src/Select/Select.tsx
+++ b/packages/ui/src/Select/Select.tsx
@@ -102,7 +102,10 @@ export const Select = (props: SelectProps) => {
 
     // Memoize the label and placeholder values based on the component size.
     const { label, placeholder } = useMemo(() => {
-        const { size, label, placeholder } = props;
+        const { size, label, placeholder: placeholderText } = props;
+
+        // If `placeholderText` is null, undefined, or an empty string after trimming, `placeholder` will be set to `undefined`.
+        const placeholder = placeholderText?.trim() || undefined;
 
         // For small or medium size, we set only the placeholder, using label as fallback.
         if (size === "small" || size === "medium") {