Input and Textarea Inside ShadCN Dialog Not Allowing Typing

[mukiturrahman]

I tried using a custom open state to handle the dialog opening, but then my drop down menu doesn't work. Can anyone please guide me in finding the error?

Thanks!

<div className="absolute right-2 top-2 z-30 opacity-100 transition-opacity">
                                                                        <DropdownMenu>
                                                                            <DropdownMenuTrigger
                                                                                asChild
                                                                            >
                                                                                <Button
                                                                                    variant="ghost"
                                                                                    className="h-8 w-8 bg-black/40 p-0 text-white hover:bg-black/20"
                                                                                >
                                                                                    <DotsThree
                                                                                        className="h-5 w-5"
                                                                                        weight="bold"
                                                                                    />
                                                                                </Button>
                                                                            </DropdownMenuTrigger>
                                                                            <DropdownMenuContent align="end">
                                                                                {/* Edit Button - Prevent Closing */}
                                                                                <Dialog>
                                                                                    <DialogTrigger
                                                                                        asChild
                                                                                    >
                                                                                        <DropdownMenuItem
                                                                                            disabled
                                                                                            className="cursor-pointer text-purple-600"
                                                                                            onSelect={(
                                                                                                e,
                                                                                            ) => {
                                                                                                e.preventDefault(); // Prevent menu from closing
                                                                                                setTitle(
                                                                                                    pin.title,
                                                                                                ); // Set title when editing
                                                                                                setDescription(
                                                                                                    pin.description,
                                                                                                ); // Set description when editing
                                                                                            }}
                                                                                        >
                                                                                            <PencilSimple className="mr-2 h-4 w-4" />
                                                                                            Edit
                                                                                        </DropdownMenuItem>
                                                                                    </DialogTrigger>
                                                                                    <DialogContent className="sm:max-w-[425px]">
                                                                                        <DialogHeader>
                                                                                            <DialogTitle>
                                                                                                Edit
                                                                                                Pin
                                                                                            </DialogTitle>
                                                                                            <DialogDescription>
                                                                                                Make
                                                                                                changes
                                                                                                to
                                                                                                your
                                                                                                pin.
                                                                                                Click
                                                                                                save
                                                                                                when
                                                                                                you're
                                                                                                done.
                                                                                            </DialogDescription>
                                                                                        </DialogHeader>
                                                                                        <div className="grid gap-4 py-4">
                                                                                            <div className="grid gap-2">
                                                                                                <Label htmlFor="title">
                                                                                                    Title
                                                                                                </Label>
                                                                                                <Input
                                                                                                    id="title"
                                                                                                    value={
                                                                                                        title
                                                                                                    }
                                                                                                    onChange={(
                                                                                                        e,
                                                                                                    ) =>
                                                                                                        setTitle(
                                                                                                            e
                                                                                                                .target
                                                                                                                .value,
                                                                                                        )
                                                                                                    }
                                                                                                    className="col-span-3"
                                                                                                />
                                                                                            </div>
                                                                                            <div className="grid gap-2">
                                                                                                <Label htmlFor="description">
                                                                                                    Description
                                                                                                </Label>
                                                                                                <Textarea
                                                                                                    id="description"
                                                                                                    value={
                                                                                                        description
                                                                                                    }
                                                                                                    onChange={(
                                                                                                        e,
                                                                                                    ) =>
                                                                                                        setDescription(
                                                                                                            e
                                                                                                                .target
                                                                                                                .value,
                                                                                                        )
                                                                                                    }
                                                                                                    className="col-span-3"
                                                                                                />
                                                                                            </div>

                                                                                            {/* <div className="grid grid-cols-2 gap-4">
                                                                                                <div className="grid gap-2">
                                                                                                    <Label htmlFor="scheduleDate">
                                                                                                        Date
                                                                                                    </Label>
                                                                                                    <Input
                                                                                                        id="scheduleDate"
                                                                                                        type="date"
                                                                                                        value=""
                                                                                                    />
                                                                                                </div>
                                                                                                <div className="grid gap-2">
                                                                                                    <Label htmlFor="scheduleTime">
                                                                                                        Time
                                                                                                    </Label>
                                                                                                    <Select value="">
                                                                                                        <SelectTrigger id="scheduleTime">
                                                                                                            <SelectValue placeholder="Select time" />
                                                                                                        </SelectTrigger>
                                                                                                        <SelectContent>
                                                                                                            {Array.from(
                                                                                                                {
                                                                                                                    length: 24,
                                                                                                                },
                                                                                                                (
                                                                                                                    _,
                                                                                                                    i,
                                                                                                                ) => (
                                                                                                                    <SelectItem
                                                                                                                        key={
                                                                                                                            i
                                                                                                                        }
                                                                                                                        value={
                                                                                                                            i
                                                                                                                        }
                                                                                                                    >
                                                                                                                        {i
                                                                                                                            .toString()
                                                                                                                            .padStart(
                                                                                                                                2,
                                                                                                                                '0',
                                                                                                                            )}
                                                                                                                        :00
                                                                                                                    </SelectItem>
                                                                                                                ),
                                                                                                            )}
                                                                                                        </SelectContent>
                                                                                                    </Select>
                                                                                                </div>
                                                                                            </div> */}
                                                                                        </div>
                                                                                        <div className="flex justify-end gap-3">
                                                                                            <Button
                                                                                                onClick={() =>
                                                                                                    handleUpdate(
                                                                                                        pin.pinId,
                                                                                                    )
                                                                                                }
                                                                                                disabled={
                                                                                                    isUpdating
                                                                                                }
                                                                                            >
                                                                                                {isUpdating
                                                                                                    ? 'Updating...'
                                                                                                    : 'Save Changes'}
                                                                                            </Button>
                                                                                        </div>
                                                                                    </DialogContent>
                                                                                </Dialog>

                                                                                {/* Delete Button */}
                                                                                <DropdownMenuItem
                                                                                    disabled
                                                                                    onClick={() =>
                                                                                        handleDelete(
                                                                                            pin.pinId,
                                                                                        )
                                                                                    }
                                                                                    className="cursor-pointer text-red-600"
                                                                                >
                                                                                    <Trash className="mr-2 h-4 w-4" />
                                                                                    Delete
                                                                                </DropdownMenuItem>
                                                                            </DropdownMenuContent>
                                                                        </DropdownMenu>
                                                                    </div>

[arunkumarayinabathina]

✅ Solution:

Move the Dialog outside the DropdownMenu.

Use state (useState) to open the dialog manually.

Prevent the dropdown from closing when selecting "Edit".

---

💡 Steps to Fix It:

import { useState } from "react";
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@/components/ui/dropdown-menu";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { PencilSimple, DotsThree } from "@phosphor-icons/react";

export function PinDropdown({ pin }) {
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [title, setTitle] = useState(pin.title);
  const [description, setDescription] = useState(pin.description);

  return (
    <>
      {/* Dropdown */}
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="ghost" className="h-8 w-8 bg-black/40 p-0 text-white">
            <DotsThree className="h-5 w-5" weight="bold" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          <DropdownMenuItem
            className="cursor-pointer text-purple-600"
            onSelect={(e) => {
              e.preventDefault(); // Prevent closing
              setIsDialogOpen(true);
            }}
          >
            <PencilSimple className="mr-2 h-4 w-4" />
            Edit
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>

      {/* Dialog (moved outside) */}
      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>Edit Pin</DialogTitle>
            <DialogDescription>Make changes and click save.</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid gap-2">
              <label htmlFor="title">Title</label>
              <Input id="title" value={title} onChange={(e) => setTitle(e.target.value)} />
            </div>
            <div className="grid gap-2">
              <label htmlFor="description">Description</label>
              <Textarea id="description" value={description} onChange={(e) => setDescription(e.target.value)} />
            </div>
          </div>
          <div className="flex justify-end gap-3">
            <Button onClick={() => console.log("Updated:", title, description)}>Save Changes</Button>
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
}

---

🔧 Why This Works:

1. Dialog is outside the dropdown → No more weird closing behavior.

2. Using useState to handle open state → No need for nested DialogTrigger.

3. onSelect={(e) => e.preventDefault()} → Stops the menu from closing when clicking "Edit".

---

🎯 Expected Behavior:

Click menu button (...) → Dropdown opens.

Click "Edit" → Dialog opens without closing the dropdown.

Make changes and click "Save Changes" → Updates data, closes dialog.