Dialog in Dropdown Menu: Space Bar Not Working in Inputs

[sazzad karim]

When using a dialog within a dropdown menu, pressing the space bar does not work as expected in the input fields.

// Dropdown menu code

const Profile = () => {
<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"
                onClick={(e) => e.preventDefault()}
              >
                <LoginModal />
              </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      }

 // Dialog Code

const LoginDialog = () => {
     const [open, setOpen] = useState(false);
     
           <Dialog open={open} onOpenChange={setOpen}>
        <DialogTrigger>
          <Button variant="outline" className="border-0">
            Sign In
          </Button>
        </DialogTrigger>
        <DialogContent className="md:max-w-[500px] sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle className="text-xl">Log In</DialogTitle>
            <DialogDescription>Sign in to your account.</DialogDescription>
          </DialogHeader>
          {/* FORM */}
          <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)}>
              <FormField
                control={form.control}
                name="email"
                render={({ field }) => (
                  <FormItem className="mb-5">
                    <FormLabel>Email</FormLabel>
                    <FormControl>
                      <Input placeholder="[e-mail]" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="password"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Password</FormLabel>
                    <FormControl>
                      <Input type="password" placeholder="******" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <DialogFooter>
                <Button type="submit" className="mt-4 w-full">
                  {isLoading ? (
                    <RiLoaderLine className="animate-spin h-5 w-5" />
                  ) : (
                    "Log In"
                  )}
                </Button>
              </DialogFooter>
            </form>
          </Form>
        </DialogContent>
      </Dialog>
      }

[Vlad Moroz]

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)

[sazzad karim]

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?

[Vlad Moroz]

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

[sazzad karim]

Can i have to remove DialogTrigger from LoginDialog?

[Vlad Moroz]

Yeah it's not required in this case