Tailwind 下拉菜单项不会从 React nextjs 卡组件中弹出

Question

我有一个下拉菜单组件（

DropdownWithSearch

），但是当我单击它时，它不会弹出，而是在它所在的卡片组件（在

UserAssignForm

中）内打开。

DropdownWithSearch

组件

import { Menu, Transition } from '@headlessui/react';
import { Fragment, useState } from 'react';

type DropdownWithSearchProps = {
  users: string[];
};

const DropdownWithSearch = ({ users }: DropdownWithSearchProps) => {
  const [searchTerm, setSearchTerm] = useState('');
  const [isOpen, setIsOpen] = useState(false);

  const toggleDropdown = () => {
    setIsOpen(!isOpen);
  };

  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSearchTerm(event.target.value.toLowerCase());
  };

  const filteredUsers = users.filter((user) =>
    user.toLowerCase().includes(searchTerm)
  );

  return (
    <Menu as="div" className="relative">
      <Menu.Button
        className="focus:outline-none inline-flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900"
      >
        <button
          onClick={toggleDropdown}
          className="focus:outline-none linear px-10 rounded-xl bg-brand-500 py-3 text-base font-medium text-white transition duration-200 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:text-white dark:hover:bg-brand-300 dark:active:bg-brand-200"
        >
          Select Assignee
        </button>
      </Menu.Button>
      <Transition
        show={isOpen}
        as={Fragment}
        enter="transition ease-out duration-200"
        enterFrom="opacity-0 translate-y-1"
        enterTo="opacity-100 translate-y-0"
        leave="transition ease-in duration-150"
        leaveFrom="opacity-100 translate-y-0"
        leaveTo="opacity-0 translate-y-1"
      >
        <Menu.Items
          static
          className="origin-top-left absolute left-0 mt-2 w-full max-w-md rounded-3xl shadow-lg bg-white ring-1 ring-gray-900/5 focus:outline-none z-50"
        >
          <div className="p-4">
            <input
              onChange={handleSearchChange}
              className="block w-full px-4 py-2 mb-4 text-gray-800 border rounded-md border-gray-300 focus:outline-none"
              type="text"
              placeholder="Search assignees"
              autoComplete="off"
            />
            {filteredUsers.map((user, index) => (
              <Menu.Item key={index}>
                {({ active }) => (
                  <a
                    href="#"
                    className="group relative flex gap-x-6 rounded-lg p-4 hover:bg-gray-50 cursor-pointer focus:outline-none"
                    onClick={(e) => {
                      // e.preventDefault();
                      // handleAssigneeSelect(assignee);
                    }}
                  >
                    <span className="font-semibold text-gray-900">{user}</span>
                  </a>
                )}
              </Menu.Item>
            ))}
          </div>
        </Menu.Items>
      </Transition>
    </Menu>
  );
};

export default DropdownWithSearch;

UserAssignForm

组件

import Card from "components/card";
import { useState } from 'react';
import DropdownWithSearch from './DropdownWithSearch';

export default function UserAssignForm() {
    const [selectedAssignee, setSelectedAssignee] = useState('');
    const userList = ['Alice', 'Bob', 'Charlie', 'David', 'Eve', 'Frank', 'Grace', 'Hank', 'Ivy', 'Jack'];

    return (
        <Card extra={"mb-3 w-full h-full px-6 pb-6 sm:overflow-x-auto reletive"}>
            <div className="relative flex items-center justify-between pt-4">
                <div className="text-xl font-bold text-navy-700 dark:text-white">
                    Assign Users
                </div>
            </div>
            <div className="mt-8 overflow-x-scroll xl:overflow-x-hidden">
                <div className="mt-5 mb-5 grid h-full grid-cols-1 gap-5 md:grid-cols-2">
                    <div className="flex justify-center flex-row pl-3 pt-1">
                        <DropdownWithSearch
                        users = {userList}/>
                        <input
                            disabled={true}
                            type="text"
                            id="assigneeInput"
                            placeholder="Selected Assignee"
                            value={selectedAssignee}
                            onChange={(e) => setSelectedAssignee(e.target.value)}
                            className={`cursor-not-allowed ml-4 w-100 flex h-12 items-center justify-center rounded-xl border bg-white/0 p-3 text-sm outline-none `}
                        />
                    </div>
                    {/*...*/}
                </div>
                <div className="flex justify-center">
                    <button
                        className="linear px-10 rounded-xl bg-brand-500 py-3 text-base font-medium text-white transition duration-200 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:text-white dark:hover:bg-brand-300 dark:active:bg-brand-200"
                    // onClick={handleSubmit}
                    >
                        Assign
                    </button>
                </div>
            </div>
        </Card>
    );
}

我知道我们需要将下拉菜单的位置设置为绝对位置，并且它从最近的上部相对

div

组件中弹出。虽然顺风班已经解决了，但对我来说不起作用。

Answer 1

您需要将

overflow-visible

tailwind 类 (docs) 添加到菜单，以允许弹出窗口扩展到菜单框之外。