docs(modal): clarify dismissible prop behavior

.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

apps/web/content/docs/components/modal.mdx

@@ -23,12 +23,16 @@ Using a `openModal` and `setOpenModal` state for the main React component should
 
 <Example name="modal.root" />
 
-## Backdrop dismissible
+## Dismissible modal
 
-To enable the modal to be dismissed when clicking outside of the component (ie. the backdrop) then you can pass the `dismissible` prop to the `<Modal>` component from React.
+To enable the close (X) button and allow the modal to be dismissed by clicking the backdrop or pressing the Escape key, pass the `dismissible` prop to the `<Modal>` component.
+
+When `dismissible` is set to `true`, the close button will appear in the header and the `onClose` callback will be triggered when the user tries to close the modal.
 
 <Example name="modal.dismissible" />
 
+
+
 ## Pop-up modal
 
 Use this example by passing the `popup` prop from React to the modal component to show a dialog to the user asking for a decision such as when confirming an item deletion from the database.

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);
   }