material-ui 所有点击事件都在工具提示内部被覆盖,

xnifntxz  于 6个月前  发布在  其他
关注(0)|答案(9)|浏览(63)

重复问题

  • 我已搜索现有的问题

最新版本

  • 我已测试了最新版本

重现步骤 🕹

https://codesandbox.io/s/kind-kowalevski-xnncgc?file=/demo.tsx

  1. 点击图标按钮。(仅悬停无法重现问题。)
  2. 点击链接,或尝试选择工具提示文本。

当前行为 😯

工具提示在第二个 mousedown 事件上关闭,且链接无法打开。

预期行为 🤔

工具提示在第二个 mousedown 事件上保持打开状态,以便链接打开。

上下文 🔦

如果仅悬停图标按钮,链接会打开。
我们正在使用以下不完美的解决方法(添加到 Tooltip 的默认属性中):

PopperProps: {
      onPointerDown: e => {
        if (
          e.target instanceof Element &&
          !e.target.classList.contains("MuiTooltip-tooltip")
        ) {
          e.preventDefault();
        }
      },
    },

您的环境 🌎

Chrome - 版本 106.0.5249.119(官方构建)(x86_64)
macOS Monterey 12.6

h4cxqtbf

h4cxqtbf1#

我尝试在Brave浏览器中测试这个,并且能够重定向到链接。

qc6wkl3g

qc6wkl3g2#

@PunitSoniME我在Chrome上复现了这个问题,并在问题描述中添加了更多细节。

ki0zmccv

ki0zmccv3#

我在Chrome和Firefox中都进行了测试,它都能正常工作。

ffvjumwh

ffvjumwh4#

我可以用Chrome复现这个问题。@jesrodri@PunitSoniME 你在点击链接之前点击了IconButton吗?

wsxa1bj1

wsxa1bj15#

我尝试以不同的方式重现这个错误,并注意到IconButton根本不是问题所在。这可能是按钮元素的问题:如果你用一个简单的按钮替换IconButton,行为是一样的。当按钮被替换成另一个元素,比如div或h1时,就没有问题了。

nafvub8i

nafvub8i6#

问题可能出在Tooltip或Popper上,因为覆盖PopperProps.onMouseDown修复了这个问题。

wgeznvg7

wgeznvg77#

我认为这个问题很可能与这个错误$x_{1e0f1}x$具有相同的起源。

jv2fixgn

jv2fixgn8#

文本选择在工具提示内也被覆盖。相应地更新了问题。

yizd12fk

yizd12fk9#

@emlai,当在图标按钮上触发焦点事件后,点击工具提示内的任何地方都会触发模糊事件,导致工具提示关闭。似乎图标按钮在被点击时没有显示任何视觉指示。然而,根据我的理解,焦点事件发生在点击事件之前,我们触发工具提示打开是因为它的子元素获得了焦点。这也与 #30973 有关。你可以通过使用 disableFocusListener 属性来解决这个问题。你可以在以下沙箱中看到这一点:https://codesandbox.io/p/sandbox/thirsty-meadow-lml54z
这对你有用吗?我们应该关闭这个问题吗?

相关问题