问题标签 [headless-ui]

我不完全确定如何根据布尔值切换弹出框，在我的情况下：如果有搜索结果。我以为我可以只使用 open 属性。任何帮助表示赞赏！

总结一下这个组件：

• 在输入中输入搜索词
• 正在进行 API 调用并从 te API 返回结果
• 然后应该打开 PopoverPanel

我无法打开 2 Disclosure 之一。

下面附上了试图实现这一点的方法，当我添加static道具时，它会无限期地保持打开状态。

我在 vue 3 中使用无头 ui，我想在公开打开时制作它有border-primary类。

这是我当前的代码：

如您所见，我已经尝试过使用:class="[open ? 'border-primary' : '']"in<disclosure></disclosure>但它不起作用，并且Block-scoped variable 'open' used before its declaration.在我的 vscode 中给了我这样的错误

我如何open使用价值<disclosure></disclosure>？

我正在使用 Tailwind CSS，我想在模式上显示白色下拉菜单。我试过使用z-index，但我不能让它工作。

有任何想法吗？

这是我的模态代码：

这是我的下拉代码：

在我的 Jest 测试中，我想模拟@headlessui/reactTransition和Dialog组件的动画以加快我的测试速度。我目前只是诉诸await screen.findBy's 来等待动画结束，但是随着我添加更多测试，测试套件运行时正在成为一个问题。

这是我迄今为止尝试过的模拟：

这适用于更简单的组件，例如：

但是如果我在 中尝试Modal.js，它会抛出 ff 错误：

Modal.js同时使用Dialog和Transition组件：

这是测试：

我试过搜索他们的文档和存储库，但上面似乎没有任何文档。

我想使用VueUse 的可组合虚拟滚动器来呈现HeadlessUI 的列表框内容。

这是我尝试过的：

这是可组合的虚拟滚动条：

问题是，当我尝试打开列表框时，出现此错误：

我也收到此警告：

我有一个在移动设备上使用 HeadlessUI 的导航栏Popover作为汉堡菜单。默认情况下，当您单击/聚焦不在其中的元素时，此菜单会关闭。

现在我正在尝试添加一个模式（HeadlessUI Dialog），当单击弹出菜单中的按钮时，我想打开它。模态在ModalButton组件定义 ( <><button><dialog></>) 中使用。这样做是为了分离关注点（与模态相关的所有内容都在 内ModalButton）。

问题是：当我在导航栏的弹出菜单中并单击按钮以打开对话框时。浏览器关注这个新对话框，因此弹出框失去焦点，使其关闭。由于它关闭，按钮（以及对话框兄弟）不再呈现，因此对话框立即消失。

作为参考，这是反应树的伪代码：

我可以想出几种方法来解决这个问题，但都不是很好：

1. 将模式拉到树中更高的位置，在弹出框/汉堡菜单之外，但仍在导航栏内。但这打破了关注点的分离，因为导航栏现在必须担心模式的打开状态。
2. 将 modal 放在树的顶部某处，并使用某种全局状态（需要状态管理库）来处理 modal 的打开。
3. 也许有一种方法可以防止Popover在专注于对话框时关闭？（但在聚焦任何不是对话框的东西时仍然允许它关闭）

我很想听听有关解决此问题的任何想法。

我将 HeadlessUI 与 MUI 5 结合使用，并面临一个问题，即在 HeadlessUI 的组件中<DatePicker />使用日期选择弹出器时无法关闭它。<Dialog />当我单击弹出器之外但在模式内的任何位置时，弹出器应该关闭。

我尝试使用 MUI <ClickAwayListener />，并将 popper 设置为<Dialog />通过 usingPopperProps={{ disablePortal: true }}但都没有成功。也许我错过了一些明显的东西？

我们在我们的 React 项目中使用来自 headlessUI ( https://headlessui.dev/react/tabs ) 的组件。我们需要将按钮放入 tabs 组件的选项卡中，这样我们就可以用按钮打开下一个选项卡。类似于这里的问题使用后退和下一个按钮在选项卡之间导航 - material-ui（版本 0.18.7）

我们试图在网上找到解决方案，并尝试使用组件的道具。

过去是否有人遇到过类似的问题或知道我们如何处理这个问题？

我有一个模式与图表位于同一组件中。我的意图是当我单击图表上的数据点时，我可以打开模式并获取与该点相关的详细信息。这将在模态显示时发生。问题是图表看起来会导致模式上的重新渲染发生。在模态的无头 ui 对话框组件中，它的 onClose 在此重新渲染期间被调用，并自动关闭模态中间渲染。删除图表并放入按钮进行模拟时，问题就消失了。我已经使用这个相同的模态组件大约 8 个月了，没有出现这样的问题。不幸的是，我在 headless ui 的 github 上没有看到任何类似的问题。我倾向于我做了一些我还没有挑选出来的愚蠢的事情，所以任何新鲜的眼睛都会很棒。

转载问题