重复问题
- 我搜索了现有的问题
最新版本
- 我测试了最新版本
重现步骤 🕹
链接到实时示例： https://codesandbox.io/s/tender-tree-xzql42?file=/demo.js
当前行为 😯
在纸张组件内除了选项之外，我有两个元素，一个是按钮，另一个是复选框。为了防止用户与这些元素交互时触发自动完成的失去焦点事件，我在鼠标按下事件上调用了event.preventDefault()。每个元素都是可点击的，不会触发失去焦点，但不幸的是，点击复选框的标签会导致它失去焦点。
预期行为 🤔
点击复选框的标签应该只是切换复选框的选中状态，而不应该调用失去焦点的方法。
上下文 🔦
我试图实现的是，我有两组选项，当我勾选复选框时，它会显示另一组选项。点击复选框或其标签都不应该触发失去焦点。
你的环境 🌎
npx @mui/envinfo
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
4条答案
按热度按时间8wtpewkr1#
这是
Paper组件在Autocomplete中的预期行为。要实现您的设计，您可以尝试自定义Listbox组件，它应该自动处理这些事件。这里有一个可用的沙箱：https://codesandbox.io/s/https-github-com-mui-material-ui-issues-36619-1fofhq?file=/demo.js
PS - 这里是关于自定义
Autocomplete内部Listbox的一些具体文档：https://mui.com/material-ui/react-autocomplete/#listboxcomponentjv2fixgn2#
@mj12albert 那个看起来不错。我没有尝试过Listbox,因为我知道它是无序列表组件，除了li之外的其他元素放在那里不符合语义，但它仍然可以工作。
它仍然在发生。试着点击复选框标签。
whitzsjs3#
@trronaldbasco 您说得对，这确实破坏了语义 - 用
div替换Listbox,然后在{props.children}周围加上ul可以解决这个问题。(这并不比手动处理Paper上的 mouseDown 更方便)问题仍然存在。请尝试点击复选框标签。
这可能是与复选框本身相关的问题，我会检查一下，并可能打开一个单独的问题
toiithl64#
@mj12albert 复选框方面有任何更新吗？