DropDown 和 ListBox 无法正常工作（Next.js + TailwindCSS + HeadlessUI）

Question

我对下拉菜单有疑问。当我单击下拉菜单时，它会立即打开并关闭。我已经通过文档安装了 TailwindCSS 和 HeadlessUI。我从文档 HeadlessUI 中获取了 DropDown。我认为它与 Chrome 有关，但在 Safari 中同样的问题

视频 link 外观：https://www.youtube.com/watch?v=TjXTW4jxVtw

有我的配置：

节点版本：v16.14.2

下拉代码：

import { Fragment, useState } from "react";
import { Listbox, Transition } from "@headlessui/react";
import { CheckIcon, SelectorIcon } from "@heroicons/react/solid";

const people = [
  { name: "Wade Cooper" },
  { name: "Arlene Mccoy" },
  { name: "Devon Webb" },
  { name: "Tom Cook" },
  { name: "Tanya Fox" },
  { name: "Hellen Schmidt" },
];

export default function Page() {
  const [selected, setSelected] = useState(people[0]);

  return (
    <div className="w-72 fixed top-16">
      <Listbox value={selected} onChange={setSelected}>
        <div className="relative mt-1">
          <Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left bg-white rounded-lg shadow-md cursor-default focus:outline-none focus-visible:ring-2 focus-visible:ring-opacity-75 focus-visible:ring-white focus-visible:ring-offset-orange-300 focus-visible:ring-offset-2 focus-visible:border-indigo-500 sm:text-sm">
            <span className="block truncate">{selected.name}</span>
            <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
              <SelectorIcon
                className="w-5 h-5 text-gray-400"
                aria-hidden="true"
              />
            </span>
          </Listbox.Button>
          <Transition
            as={Fragment}
            leave="transition ease-in duration-100"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <Listbox.Options className="absolute w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
              {people.map((person, personIdx) => (
                <Listbox.Option
                  key={personIdx}
                  className={({ active }) =>
                    `cursor-default select-none relative py-2 pl-10 pr-4 ${
                      active ? "text-amber-900 bg-amber-100" : "text-gray-900"
                    }`
                  }
                  value={person}
                >
                  {({ selected }) => (
                    <>
                      <span
                        className={`block truncate ${
                          selected ? "font-medium" : "font-normal"
                        }`}
                      >
                        {person.name}
                      </span>
                      {selected ? (
                        <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600">
                          <CheckIcon className="w-5 h-5" aria-hidden="true" />
                        </span>
                      ) : null}
                    </>
                  )}
                </Listbox.Option>
              ))}
            </Listbox.Options>
          </Transition>
        </div>
      </Listbox>
    </div>
  );
}

package.json

{
  "name": "test-next",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@headlessui/react": "^1.5.0",
    "@heroicons/react": "^1.0.6",
    "next": "12.1.5",
    "react": "18.0.0",
    "react-dom": "18.0.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.5",
    "eslint": "8.14.0",
    "eslint-config-next": "12.1.5",
    "postcss": "^8.4.12",
    "tailwindcss": "^3.0.24"
  }
}

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Answer 1

problem 与 Transition 和 Strict 模式有关。有两种方法可以解决。

解决方案 1

构建项目然后开始。

next build

next start

解决方案 2

最佳解决方案。在 next.config.js.

中禁用严格模式

const nextConfig = {
  reactStrictMode: false,
};

module.exports = nextConfig;

Answer 2

设置reactStrictMode: false不安全。

该问题是由 Transition 组件引起的，如果您将其删除，它将在您当前的版本中运行。

这个问题现在已经被 "@headlessui/react": "^1.6.0" 完全解决了。

DropDown 和 ListBox 无法正常工作（Next.js + TailwindCSS + HeadlessUI）

DropDown and ListBox don't work correctly (Next.js + TailwindCSS + HeadlessUI)

next.js

tailwind-css

headless-ui