Merge pull request #25102 from emilefokkema/bug/25090-select-component

Fix bug in <Select> component

.changeset/eighty-games-wink.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Fixed bug where `<Select>` component with empty string as placeholder gave an error

packages/core-components/src/components/Select/Select.test.tsx

@@ -55,6 +55,25 @@ describe('<Select />', () => {
     expect(input.textContent).toBe('test 1');
   });
 
+  it('display nothing when placeholder is empty string and items updated to none', () => {
+    const initialValue = 'initial';
+    const initialItems = [{ label: initialValue, value: initialValue }];
+    const { getByTestId, rerender } = render(
+      <Select
+        {...minProps}
+        items={initialItems}
+        selected={initialValue}
+        placeholder=""
+      />,
+    );
+
+    expect(getByTestId('select').textContent).toBe(initialValue);
+
+    rerender(<Select {...minProps} items={[]} selected="" placeholder="" />);
+
+    expect(getByTestId('select').textContent).toBe('');
+  });
+
   it('display the placeholder value when selected props updated to undefined', async () => {
     const { getByTestId, rerender } = render(
       <Select {...minProps} selected="test_1" />,

packages/core-components/src/components/Select/Select.tsx

@@ -254,7 +254,7 @@ export function SelectComponent(props: SelectProps) {
             getContentAnchorEl: null,
           }}
         >
-          {placeholder && !multiple && (
+          {!!placeholder && !multiple && (
             <MenuItem value={[]}>{placeholder}</MenuItem>
           )}
           {native