Fix/navbar mega menu mobile

.changeset/quiet-walls-click.md

@@ -0,0 +1,5 @@
+---
+"flowbite-react": patch
+---
+
+fix(navbar): keep the mobile navbar open when a nested interactive element is clicked

packages/ui/src/components/Navbar/Navbar.test.tsx

@@ -17,6 +17,27 @@ describe("Navbar", () => {
   });
 
   describe("Interactions", () => {
+    it("should keep the collapse open when clicking a nested interactive element", async () => {
+      const user = userEvent.setup();
+      render(
+        <Navbar>
+          <NavbarToggle />
+          <NavbarCollapse>
+            <NavbarLink as="span">
+              <button type="button">Open menu</button>
+            </NavbarLink>
+          </NavbarCollapse>
+        </Navbar>,
+      );
+
+      const collapse = screen.getByTestId("flowbite-navbar-collapse");
+      await user.click(screen.getByTestId("flowbite-navbar-toggle"));
+      expect(collapse).not.toHaveClass("hidden");
+
+      await user.click(screen.getByRole("button", { name: "Open menu" }));
+      expect(collapse).not.toHaveClass("hidden");
+    });
+
     it("should hide/show `NavbarMenu` when toggle is clicked", async () => {
       const user = userEvent.setup();
       render(<NavbarTest />);

packages/ui/src/components/Navbar/NavbarLink.tsx

@@ -44,6 +44,14 @@ export const NavbarLink = forwardRef<HTMLLIElement, NavbarLinkProps>((props, ref
   } = resolveProps(props, provider.props?.navbarLink);
 
   function handleClick(event: MouseEvent<HTMLAnchorElement>) {
+    const target = event.target as Element;
+    const interactiveTarget = target.closest("a, button, input, select, textarea, [role=\"button\"]");
+
+    if (interactiveTarget && interactiveTarget !== event.currentTarget) {
+      onClick?.(event);
+      return;
+    }
+
     setIsOpen(false);
     onClick?.(event);
   }