Fix placeholder visibility inheritance

src/SelectInput/Content/Placeholder.tsx

@@ -20,7 +20,7 @@ export default function Placeholder(props: PlaceholderProps) {
     <div
       className={clsx(`${prefixCls}-placeholder`, classNames?.placeholder)}
       style={{
-        visibility: show ? 'visible' : 'hidden',
+        ...(show ? {} : { visibility: 'hidden' }),
         ...styles?.placeholder,
       }}
     >

tests/__snapshots__/Combobox.test.tsx.snap

@@ -9,7 +9,6 @@ exports[`Select.Combobox renders controlled correctly 1`] = `
   >
     <div
       class="rc-select-placeholder"
-      style="visibility: visible;"
     >
       Search
     </div>
@@ -37,7 +36,6 @@ exports[`Select.Combobox renders correctly 1`] = `
   >
     <div
       class="rc-select-placeholder"
-      style="visibility: visible;"
     >
       Search
     </div>

tests/__snapshots__/ssr.test.tsx.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Select.SSR should work 1`] = `"<div class="rc-select rc-select-single"><div class="rc-select-content"><div class="rc-select-placeholder" style="visibility:visible"></div><input id="test-id" type="text" readonly="" autoComplete="new-password" class="rc-select-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-autocomplete="list" value=""/></div></div>"`;
+exports[`Select.SSR should work 1`] = `"<div class="rc-select rc-select-single"><div class="rc-select-content"><div class="rc-select-placeholder"></div><input id="test-id" type="text" readonly="" autoComplete="new-password" class="rc-select-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-autocomplete="list" value=""/></div></div>"`;

tests/placeholder.test.tsx

@@ -15,6 +15,19 @@ describe('Select placeholder', () => {
     });
   });
 
+  it('should not force placeholder visible when select is hidden', () => {
+    const { container } = render(<Select style={{ visibility: 'hidden' }} placeholder="bamboo" />);
+    const placeholder = container.querySelector<HTMLElement>('.rc-select-placeholder')!;
+
+    expect(container.querySelector('.rc-select')).toHaveStyle({
+      visibility: 'hidden',
+    });
+    expect(placeholder).not.toHaveAttribute(
+      'style',
+      expect.stringContaining('visibility: visible'),
+    );
+  });
+
   it('when value is null', () => {
     const { container } = render(<Select value={null} placeholder="bamboo" />);
     expect(container.querySelector('.rc-select-placeholder')).toBeTruthy();