When using a dialog within a dropdown menu, pressing the space bar does not work as ex

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Dialog in Dropdown Menu: Space Bar Not Working in Inputs about themes HOT 5 CLOSED

mr-sazzad commented on June 12, 2024

Dialog in Dropdown Menu: Space Bar Not Working in Inputs

from themes.

Comments (5)

vladmoroz commented on June 12, 2024

This issue is self-inflicted: your spacebar keypress event propagates to the dropdown menu item, which prevents default on click.

The dropdown and dialog should be composed differently to avoid that: #342 (comment)

from themes.

mr-sazzad commented on June 12, 2024

Dear vlad moroz, I'm unable to access the URL of final updated code into previous solution; could you please verify and provide an updated link?

from themes.

vladmoroz commented on June 12, 2024

@mr-sazzad your code would look like this.

You'd have to make your LoginDialog component controlled and pass open and onOpenChange props into the Dialog inside.

const Profile = () => {
  const [dialogOpen, setDialogOpen] = useState(false);
  
  return (
    <>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button
            variant="outline"
            className="rounded-full p-0 flex justify-center items-center overflow-hidden border-0"
            >
            <Avatar>
              <AvatarImage src="../../images/profile.svg" alt="profile-image" />
              <AvatarFallback>AW</AvatarFallback>
            </Avatar>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent className="w-56">
          <DropdownMenuItem
            className="w-full list-none m-1"
            onSelect={() => setDialogOpen(true)}
          >
            Sign in
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      
      <LoginDialog open={dialogOpen} onOpenChange={setDialogOpen} />
    </>
  );
};