fix(DropdownContent): Handle false as child (#1137)

cengage · Oct 2, 2023 · caa2c7b · caa2c7b · github-actions · Oct 2, 2023
1 parent 99a9090
commit caa2c7b
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git a/.changeset/dropdownContent-falseChild.md b/.changeset/dropdownContent-falseChild.md
@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+fix(DropdownContent): Handle `false` as child
diff --git a/packages/react-magma-dom/src/components/Dropdown/Dropdown.test.js b/packages/react-magma-dom/src/components/Dropdown/Dropdown.test.js
@@ -827,4 +827,20 @@ describe('Dropdown', () => {
       jest.useRealTimers();
     });
   });
+
+  it('should not render the false child', () => {
+    const visible = false;
+    const { queryByText } = render(
+      <Dropdown>
+        <DropdownButton>Toggle me</DropdownButton>
+        <DropdownMenuGroup header="header">
+          {visible && <DropdownMenuItem>Menu Item 1</DropdownMenuItem>}
+          <DropdownMenuItem>Menu Item 2</DropdownMenuItem>
+        </DropdownMenuGroup>
+      </Dropdown>
+    );
+
+    expect(queryByText('Menu Item 1')).not.toBeInTheDocument();
+    expect(queryByText('Menu Item 2')).toBeInTheDocument();
+  });
 });
diff --git a/packages/react-magma-dom/src/components/Dropdown/DropdownContent.tsx b/packages/react-magma-dom/src/components/Dropdown/DropdownContent.tsx
@@ -119,8 +119,8 @@ export const DropdownContent = React.forwardRef<
 
   React.Children.forEach(children, (child: any) => {
     if (
-      child.type?.displayName === 'DropdownMenuItem' ||
-      child.type?.displayName === 'DropdownMenuGroup'
+      child?.type?.displayName === 'DropdownMenuItem' ||
+      child?.type?.displayName === 'DropdownMenuGroup'
     ) {
       hasItemChildren = true;
       return;