refactor: apply review suggestions, extend tests

src/Select.tsx

@@ -29,29 +29,20 @@ function Select(props: SelectProps, ref: ForwardedRef<SelectElement>): ReactElem
   const children = Children.toArray(props.children as ReactNode[]);
 
   // Components with slot attribute should stay in light DOM.
-  const slotted = children.filter((child: any) => {
-    return 'props' in child && child.props.slot;
+  const slotted = children.filter((child) => {
+    return typeof child === 'object' && 'props' in child && child.props.slot;
   });
 
   // Component without slot attribute should go to the overlay.
-  let overlayChildren: ReactNode[] | undefined;
-
-  children.forEach((child) => {
-    if (!slotted.includes(child)) {
-      if (!overlayChildren) {
-        overlayChildren = [];
-      }
-      overlayChildren.push(child);
-    }
-  });
+  const overlayChildren = children.filter((child) => !slotted.includes(child));
 
   // React.Children.toArray() doesn't allow functions, so we convert manually.
   const renderFn = (Array.isArray(props.children) ? props.children : [props.children]).find(
-    (child: any) => typeof child === 'function',
+    (child) => typeof child === 'function',
   );
 
   const innerRef = useRef<SelectElement>(null);
-  const [portals, renderer] = useSimpleOrChildrenRenderer(props.renderer, renderFn || overlayChildren);
+  const [portals, renderer] = useSimpleOrChildrenRenderer(props.renderer, renderFn || (overlayChildren.length ? overlayChildren : undefined));
   const finalRef = useMergedRefs(innerRef, ref);
 
   useEffect(() => {

test/Select.spec.tsx

@@ -95,8 +95,10 @@ describe('Select', () => {
 
       await expect(findByQuerySelector('vaadin-select-value-button')).to.eventually.have.text('Bar');
     });
+  });
 
-    it('should correctly render the element with prefix slot', async () => {
+  describe('slot', () => {
+    it('should render the element with slot if renderer prop is set', async () => {
       render(
         <Select renderer={Renderer}>
           <div slot="prefix">Value:</div>
@@ -105,5 +107,40 @@ describe('Select', () => {
 
       await expect(findByQuerySelector('div[slot="prefix"]')).to.eventually.have.text('Value:');
     });
+
+    it('should render the element with slot if items prop is set', async () => {
+      render(
+        <Select items={items}>
+          <div slot="prefix">Value:</div>
+        </Select>,
+      );
+
+      await expect(findByQuerySelector('div[slot="prefix"]')).to.eventually.have.text('Value:');
+    });
+
+    it('should render the element with slot if children render function is set', async () => {
+      render(
+        <Select>
+          {Renderer}
+          <div slot="prefix">Value:</div>
+        </Select>,
+      );
+
+      await expect(findByQuerySelector('div[slot="prefix"]')).to.eventually.have.text('Value:');
+    });
+
+    it('should render the element with slot if children component is set', async () => {
+      render(
+        <Select>
+          <ListBox>
+            <Item value="foo">Foo</Item>
+            <Item value="bar">Bar</Item>
+          </ListBox>
+          <div slot="prefix">Value:</div>
+        </Select>,
+      );
+
+      await expect(findByQuerySelector('div[slot="prefix"]')).to.eventually.have.text('Value:');
+    });
   });
 });