为什么右键单击所选文本以打开上下文菜单后选择会被删除？答案

【问题标题】：Why does selection get removed after a right-click on selected text to open the context menu?为什么右键单击所选文本以打开上下文菜单后选择会被删除？
【发布时间】：2022-08-05 15:05:35
【问题描述】：

我正在使用context menu implementation provided by Material UI。它在 Chrome 上运行良好，如下所示。

铬合金：

但是我在 Firefox 浏览器上遇到了一个奇怪的问题。使用 Firefox 和 Material UI 的上下文菜单组合，当我选择文本并对所选文本执行右键单击时，它会触发一个上下文菜单，但它只是清除了文本选择。它可以在 Material UI 的official site as well 上重现。

火狐：

我在这里错过了 Firefox 的一些东西吗？

这不是我遇到的第一个在 firefox 中不起作用的东西，backdrop-filter，smooth 在 scrollTo 函数中的行为，非常严格地限制了 canvas-size，scrollWidth 不能仅仅命名一个很少。我不想承认，但 Firefox 正在慢慢消亡。

标签： javascript reactjs firefox material-ui

【解决方案1】：

我找到了一种解决方法，可以让 Menu 组件在 Firefox 浏览器上运行。您需要指示Menu 组件的行为有所不同，如以下代码 sn-p 所示。

<Menu
  ...
  autoFocus={false}
  disableAutoFocus
  ...
>

autoFocus - 如果将此属性设置为false，焦点将放在父模态容器上。在Menu's API section 中查找有关autoFocus 的更多详细信息。
disableAutoFocus - 如果设置为 true，模态在打开时不会自动将焦点转移到自身，并在关闭时将其替换为最后一个焦点元素。在Modal's API section 中查找有关disableAutoFocus 的更多详细信息。
使用此解决方案，您需要额外考虑可访问性。

【讨论】：