Trigger a modal from a dropdown

[stefanwright1988]

Hey experts!

I am currently working on building a todo application, and what I would like to do is have each todo in a card. In that card header I want to have a dropdown menu trigger (using a NextUI Dropdown), the dropdown menu items will be for Edit and Delete actions, the buttons for these will trigger a modal popup (using a NextUI Modal).

The issue I currently have is that I click the dropdown menu item, the modal pops up, but disappears almost instantly. I cannot find a way to make this work? I was trying to use the components in NextUI as much as possible so I don't need to build out my own functionaity. Any help is greatly appreaciated.

I currently have this:

<Dropdown>
    <DropdownTrigger>
        <Button variant="bordered">
            Open Menu
        </Button>
    </DropdownTrigger>
     <DropdownMenu aria-label="Static Actions">
        <DropdownItem key="new">
             <EditModal _id={_id} title={title} content={content} />
        </DropdownItem>
        <DropdownItem key="copy">
             <DeleteModal _id={_id} title={title} content={content} /></DropdownItem>
        </DropdownMenu>
</Dropdown>

The EditModal for example is:

<>
    <Button color="primary" onPress={onOpen} radius="none" className='h-full'>Edit</Button>
    <GlobalModal isOpen={isOpen} onClose={onClose}>
        <EditForm onClose={onClose} id={_id} title={title} content={content} />
    </GlobalModal>
</>

And GlobalModal is:

<Modal
    backdrop='blur'
    isOpen={isOpen}
    onClose={onClose}
    onOpenChange={onOpenChange}
    isDismissable={true}
    placement='bottom-center'
    classNames={{
        base: `rounded-b-none m-0 sm:rounded-b-large sm:mx-6 sm:my-16`, //Main modal container
        header: `justify-center`
    }}
>
    <ModalContent>
        {children}
    </ModalContent>
</Modal>

---Edit---
I have tried moving the <DropdownItem key="new"> into the EditModal component, however this throws an error

[tetslee]

The docs say the children of ModalContent should be a function:

 <ModalContent>
          {(onClose) => (
            <>
            ...

https://nextui.org/docs/components/modal#usage

[stefanwright1988]

correct it does, however if I have this modal outside of the DropdownItem it will work perfectly fine, yet inside the DropdownItem it closes almost straight away

[KnightKrusty]

Screencast.from.2023-11-22.19-40-29.webm

@stefanwright1988 Having the same issue

[KnightKrusty]

The modal should open immediately after clicking on invite user but it open when i again click on dropdownmenu

[stefanwright1988]

yes this is the same issue I found. I suspect it doesn't show until the second click on the dropdown because the dropdown creates it's own layer in the dom that is hidden when it gets closed. Except you cannot set the modal to be outside the DropdownItem because then you get an error which I guess it because DropdownMenu expects only DropdownItem components

[KnightKrusty]

Yeah, You are right it does not show untill the second click and, even if you return DropdownItem from a component it will still throw an error which is very weird...

[knightvibhi]

@stefanwright1988 @theonlyway @thebashpotato Hey, i found a fix and its pretty simple, Just put the modal outside of dropdown

<Dropdown className="cursor-pointer" placement="left-start">
  <DropdownMenu
    onAction={(key) => {
      if (key === "invite user") {
        inviteUserModel.onOpen();
      }

      if (key === "deactivate_workspace") {
        deleteUserModel.onOpen();
      }

      if (key === "workspace settings") {
        navigate(`/dashboard/${workspace_name}/settings`);
      }
    }}
    aria-label="Profile Actions"
    variant="flat"
  >
    {/* Dropdown menu items */}
  </DropdownMenu>
</Dropdown>

// this is the modal and InviteUserModal is basically things returned from useDisclosure() hook
<InviteUser inviteUserModel={inviteUserModel} workspace_name={workspace_name} />

[thebashpotato]

Has anyone came to a workaround to this issue?

[theonlyway]

I just started running in to this myself. I'm using plenty of modals elsewhere in my project but the moment I attempt to do trigger opening one from the dropdown menu I get the same behavior as described.

[shansubra]

@stefanwright1988 @theonlyway @thebashpotato @KnightKrusty - I am trying to create a global modal (to show in multiple places) using NextUI Modal but I am struggling to implement this. If you guys have any sample project to show how NextUI Modal works that would be very helpful.

[theonlyway]

The key is just passing in a disclosure to the modal. For example you have this modal component

import type { UseDisclosureReturn } from '@nextui-org/use-disclosure';

export default function ExampleModal({
  disclosure,
}: {
  disclosure: UseDisclosureReturn;
}) {
  const { isOpen, onOpen, onOpenChange, onClose } = disclosure;

  return (
    <>
      <Modal
        placement='center'
        isOpen={isOpen}
        onOpenChange={onOpenChange}
        isDismissable={false}
        onClose={() => {
          form.reset();
        }}
      >
        <ModalContent>
          {(onClose) => (
            <>
              <ModalHeader className='flex justify-center'>
                    /.../
              </ModalHeader>
              <ModalBody>
                  /.../
              </ModalBody>
            </>
          )}
        </ModalContent>
      </Modal>
    </>
  );
}

Then you place this modal somewhere on your page outside of the DropDown component. Assign useDisclosure to a const outside of the modal component and then pass the disclosure into the modal component. Then use the DropdownMenu onAction event to open the modal using the disclosure that is passed in to the modal component.

export default function Actions() {
 const exampleModal = useDisclosure();

  return (
    <div className={cn('grid grid-cols-2 rounded-t-lg px-4 py-3')}>
      <div className='mr-auto flex gap-x-2 whitespace-nowrap '>/.../</div>
      <div className='flex items-center justify-end gap-2'>
        <Dropdown aria-label='actions-dropdown'>
          <DropdownTrigger aria-label='actions-trigger'>
            <Button isIconOnly size='sm' variant='light'>
              <MoreVertical />
            </Button>
          </DropdownTrigger>
          <DropdownMenu
            aria-label='actions-dropdown-menu'
            onAction={(key) => {
              if (key === 'deleteProgram') {
                exampleModal.onOpen();
              }
            }}
          >
            <DropdownSection title='Danger zone'>
              <DropdownItem key='deleteProgram'>Delete program</DropdownItem>
            </DropdownSection>
          </DropdownMenu>
        </Dropdown>
      </div>
      <ExampleModal disclosure={exampleModal} />
    </div>
  );
}

[shansubra]

Thank you so much... I really appreciate your help & quick turn around.

[Arrugonoto]

Works like a charm, imho, universal answer, works for every possible scenario.

[jimmyzzxhlh]

I'm struggling to implement the modal in a dropdown menu as well and I've tried the above solutions but the modal just never shows up.

Basically what I have is:

const Table = () => {
  const editModal = useDisclosure();

  const onActionItemClick = (key: Key) => {
    switch (key) {
      case "edit":
        console.log("Opening edit modal");
        editModal.onOpen();
    }
  };

  return (
    <div className="relative flex items-center justify-end gap-2">
      <Dropdown>
        <DropdownTrigger>
          <Button isIconOnly size="sm" variant="light">
            <VerticalDotsIcon className="text-default-300" />
          </Button>
        </DropdownTrigger>
        <DropdownMenu onAction={onActionItemClick}>
          <DropdownItem key={`edit`}>Edit</DropdownItem>
          <DropdownItem key={`delete`}>Delete</DropdownItem>
        </DropdownMenu>
      </Dropdown>
      <Modal
        isOpen={editModal.isOpen}
        onOpenChange={editModal.onOpenChange}
        placement="top-center"
        backdrop="blur"
      >
        <ModalContent>
          {(onClose) => (
            <>
              <ModalHeader className="flex flex-col gap-2">Edit</ModalHeader>
              <ModalBody>
                <div>Here is modal body</div>
              </ModalBody>
            </>
          )}
        </ModalContent>
      </Modal>
    </div>
  );

}

I can see the console log trying to open the edit modal. Does anyone know what's going on here? Thanks in advance!

[Arrugonoto]

Before the latest release my component worked perfectly with the 'isReadOnly' prop workaround. Since that I havent used component which rendered dropdown(I just worked on different components). But since latest release (I think because I have found issue yesterday), it stopped working.

export const DropdownTable = ({ expense }: { expense: ExpenseIdRequired }) => {
  return (
    <Dropdown>
      <DropdownTrigger>
        <Button className="min-w-8 p-0 bg-transparent hover:bg-gray-400/20">
          <div>
            <tableIcons.menu className="text-lg" />
          </div>
        </Button>
      </DropdownTrigger>
      <DropdownMenu aria-label="Table actions" variant="faded">
        <DropdownItem
          isReadOnly
          key="edit"
          className="p-0"
          textValue="Update selected expense"
        >
          <UpdateExpenseModal expense={expense} />
        </DropdownItem>
        <DropdownItem
          isReadOnly
          key="delete"
          className="text-danger p-0"
          color="danger"
          textValue="Delete selected expense from list"
        >
          <DeleteExpenseModal expense_id={expense.id} />
        </DropdownItem>
      </DropdownMenu>
    </Dropdown>
  );
 };

I haven't changed a single thing, while I render modal exactly inside Dropdown component (not wrapped inside dropdown menu), it renders my modal trigger and modal is rendered correctly after press/click. For now - debugging ¯_(ツ)_/¯

[GVALFER]

I have exactly the same issue.
How to fix it?