Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[bug]: After the mobile sidebar is opened and the page is redirected, the style="pointer-events: none;" in the body affects the click events on the redirected page. #6227

Open
2 tasks done
Amazing-ah opened this issue Dec 31, 2024 · 4 comments
Open
2 tasks done

[bug]: After the mobile sidebar is opened and the page is redirected, the style="pointer-events: none;" in the body affects the click events on the redirected page. #6227

Amazing-ah opened this issue Dec 31, 2024 · 4 comments
Labels
bug Something isn't working

Comments

@Amazing-ah
Copy link

Amazing-ah commented Dec 31, 2024 •
edited
Loading

Describe the bug

On the mobile page, after opening the sidebar, a link was redirected. After the redirect, the style="pointer-events: none;" in the body was not reset, affecting the page's click events.

Affected component/components

Sidebar

How to reproduce

  1. NavUser.tsx
  <SidebarMenu>
      <DropdownMenuGroup>
              <DropdownMenuItem onClick={() => router.push('/')}>
                <Undo2 />
               Return to Home Page
              </DropdownMenuItem>
            </DropdownMenuGroup>
  </SidebarMenu>

then in body

<body style='pointer-events:none;'></body>

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

macos
chrome

Before submitting

  • I've made research efforts and searched the documentation
  • I've searched for existing issues
@Amazing-ah Amazing-ah added the bug Something isn't working label Dec 31, 2024
@Amazing-ah
Copy link
Author 

  onClick={() => {
                  document.body.style.pointerEvents = 'auto';
                  router.push('/');
                }}

I used this method to solve my problem, but I'm not sure if it's the best solution.

@Chukwu3meka
Copy link

@Amazing-ah just to be clear why are you using pointer-events: none. none will not trigger event listeners? If you want to hide cursor the right way would be cursor: none.

Then from the docs DropdownMenuItem should be wrapped in DropdownMenu

<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Billing</DropdownMenuItem>
    <DropdownMenuItem>Team</DropdownMenuItem>
    <DropdownMenuItem>Subscription</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

I just tried that and its working as expected

@Amazing-ah
Copy link
Author

Amazing-ah commented Jan 2, 2025 •
edited
Loading

@Chukwu3meka

Thank you for the response. The pointer-events: none attribute was not added by me, but by the Dropdown and SideBar components. The Sidebar only adds this attribute when the screen width is less than 768px. Whenever it expands, it inserts the pointer-events: none attribute into the body. I'm sorry I didn't provide the complete code, as it was just to illustrate that the dropdown is referenced in the sidebar. When the screen width is less than 768px, expanding the dropdown and then navigating the link causes an issue, i.e., this attribute is not removed, and I cannot click on the page after navigating because of this attribute.

 <SidebarMenu>
      <SidebarMenuItem>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <SidebarMenuButton
              size="lg"
              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
            >
              <Avatar className="h-8 w-8 rounded-lg">
                <AvatarImage src={user.avatar} alt={user.name} />
                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
              </Avatar>
              <div className="grid flex-1 text-left text-sm leading-tight">
                <span className="truncate font-semibold">{user.name}</span>
                <span className="truncate text-xs">{user.email}</span>
              </div>
              <ChevronsUpDown className="ml-auto size-4" />
            </SidebarMenuButton>
          </DropdownMenuTrigger>
          <DropdownMenuContent
            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
            side={isMobile ? 'bottom' : 'right'}
            align="end"
            sideOffset={4}
          >
            <DropdownMenuLabel className="p-0 font-normal">
              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                <Avatar className="h-8 w-8 rounded-lg">
                  <AvatarImage src={user.avatar} alt={user.name} />
                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
                </Avatar>
                <div className="grid flex-1 text-left text-sm leading-tight">
                  <span className="truncate font-semibold">{user.name}</span>
                  <span className="truncate text-xs">{user.email}</span>
                </div>
              </div>
            </DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem
                onClick={async () => {
                  document.body.style.pointerEvents = 'auto';
                  router.push('/');
                }}
              >
                <Undo2 />
                Return to homepage
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem
                onClick={() => {
                  router.push('/admin/account');
                }}
              >
                <BadgeCheck />
Account Settings              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuItem
              onClick={async () => {
                document.body.style.pointerEvents = 'auto';
                await logout();
              }}
            >
              <LogOut />
              Log out
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>
    </SidebarMenu>```

@Chukwu3meka
Copy link

Chukwu3meka commented Jan 2, 2025 •
edited
Loading

This works fine for me. You might want to read further here

//layout.tsx
"use client";

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { BadgeCheck, ChevronsUpDown, LogOut } from "lucide-react";
import { useRouter } from "next/navigation";
import { useState } from "react";

import "./globals.css";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const [user, setUser] = useState({
    name: "test name",
    email: "[email protected]",
  });

  const [isMobile, setIsMobile] = useState(false);

  const router = useRouter();

  return (
    <html lang="en">
      <body>
        <SidebarProvider>
          <SidebarMenu>
            <SidebarMenuItem>
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <SidebarMenuButton
                    size="lg"
                    className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
                    {/* <Avatar className="h-8 w-8 rounded-lg">
              <AvatarImage src={user.avatar} alt={user.name} />
              <AvatarFallback className="rounded-lg">CN</AvatarFallback>
            </Avatar> */}
                    <div className="grid flex-1 text-left text-sm leading-tight">
                      <span className="truncate font-semibold">{user.name}</span>
                      <span className="truncate text-xs">{user.email}</span>
                    </div>
                    <ChevronsUpDown className="ml-auto size-4" />
                  </SidebarMenuButton>
                </DropdownMenuTrigger>
                <DropdownMenuContent
                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
                  side={isMobile ? "bottom" : "right"}
                  align="end"
                  sideOffset={4}>
                  <DropdownMenuLabel className="p-0 font-normal">
                    <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                      {/* <Avatar className="h-8 w-8 rounded-lg">
                <AvatarImage src={user.avatar} alt={user.name} />
                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
              </Avatar> */}
                      <div className="grid flex-1 text-left text-sm leading-tight">
                        <span className="truncate font-semibold">{user.name}</span>
                        <span className="truncate text-xs">{user.email}</span>
                      </div>
                    </div>
                  </DropdownMenuLabel>
                  <DropdownMenuSeparator />
                  <DropdownMenuGroup>
                    <DropdownMenuItem
                      onClick={async () => {
                        // document.body.style.pointerEvents = 'auto';
                        router.push("/");
                      }}>
                      {/* <Undo2 /> */}
                      Return to homepage
                    </DropdownMenuItem>
                  </DropdownMenuGroup>
                  <DropdownMenuSeparator />
                  <DropdownMenuGroup>
                    <DropdownMenuItem
                      onClick={() => {
                        router.push("/admin/account");
                      }}>
                      <BadgeCheck />
                      Account Settings{" "}
                    </DropdownMenuItem>
                  </DropdownMenuGroup>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem
                    onClick={async () => {
                      console.log("clicked 3");
                      // document.body.style.pointerEvents = 'auto';
                      // await logout();
                    }}>
                    <LogOut />
                    Log out
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </SidebarMenuItem>
          </SidebarMenu>

          <main>
            <SidebarTrigger />
            {children}
          </main>
        </SidebarProvider>
      </body>
    </html>
  );
}
// home page
"use client";


export default function Component() {
  return (
    <p>
      home oage
      <button onClick={() => console.log("click works just fine")}>click me</button>
    </p>
  );
}
//admin/account
"use client";

export default function Component() {
  return (
    <p>
      admin page
      <button onClick={() => console.log("click works just fine")}>click me</button>
    </p>
  );
}

pointer-events is set to none when mobile sidebar is open and then removed when its no longer active or after a click event. you might need to explain further what you need to achieve if this does not work for you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Chukwu3meka @Amazing-ah