fix(app-headless-cms): pass placeholder to select field renderer (#4209)

webiny · Jul 30, 2024 · b638f0d · b638f0d
1 parent 4525f46
commit b638f0d
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 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
@@ -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
@@ -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") {