[Select][joy-ui] Fix displaying placeholder when multiple is true (mu…

…i#39806)

packages/mui-joy/src/Select/Select.test.tsx

@@ -673,5 +673,28 @@ describe('Joy <Select />', () => {
 
       expect(getByRole('combobox')).to.have.text('One, Two');
     });
+
+    it('should render placeholder when options are not selected', () => {
+      const { getByRole } = render(
+        <Select multiple defaultValue={[]} placeholder="hello">
+          <Option value={1}>One</Option>
+          <Option value={2}>Two</Option>
+        </Select>,
+      );
+
+      expect(getByRole('combobox')).to.have.text('hello');
+    });
+
+    it('renders the selected values inplace of placeholder', () => {
+      const { getByRole } = render(
+        <Select multiple defaultValue={[1, 2]} placeholder="hello">
+          <Option value={1}>One</Option>
+          <Option value={2}>Two</Option>
+        </Select>,
+      );
+
+      expect(getByRole('combobox')).to.have.text('One, Two');
+      expect(getByRole('combobox')).not.to.have.text('hello');
+    });
   });
 });

packages/mui-joy/src/Select/Select.tsx

@@ -571,16 +571,23 @@ const Select = React.forwardRef(function Select<OptionValue extends {}, Multiple
     [listboxProps.modifiers],
   );
 
+  let displayValue = placeholder;
+
+  if (
+    (Array.isArray(selectedOption) && selectedOption.length > 0) ||
+    (!Array.isArray(selectedOption) && !!selectedOption)
+  ) {
+    displayValue = renderValue(selectedOption);
+  }
+
   return (
     <React.Fragment>
       <SlotRoot {...rootProps}>
         {startDecorator && (
           <SlotStartDecorator {...startDecoratorProps}>{startDecorator}</SlotStartDecorator>
         )}
 
-        <SlotButton {...buttonProps}>
-          {selectedOption ? renderValue(selectedOption) : placeholder}
-        </SlotButton>
+        <SlotButton {...buttonProps}>{displayValue}</SlotButton>
         {endDecorator && <SlotEndDecorator {...endDecoratorProps}>{endDecorator}</SlotEndDecorator>}
 
         {indicator && <SlotIndicator {...indicatorProps}>{indicator}</SlotIndicator>}