为何右键选中文字打开Material UI上下文菜单后，Firefox中选中状态消失？

问题情况 #

使用Material UI的上下文菜单实现功能时，Chrome浏览器中一切正常，但Firefox存在异常：选中一段文字后右键触发上下文菜单，文本的选中状态会被自动清除，该问题在Material UI官方示例中也可复现：

Chrome 正常效果 #

Firefox 异常表现 #

修复步骤 #

这是Firefox的默认行为导致的——右键唤出上下文菜单时，浏览器会自动清除文本选区。可以通过以下方法解决：

• 第一步：保存文本选区
  在监听contextmenu事件时，先把当前的文本选区保存下来：

  let savedSelection;
  
  const handleContextMenu = (event) => {
    event.preventDefault();
    // 保存当前文本选区
    savedSelection = window.getSelection();
    // 原有打开菜单的逻辑
    setAnchorEl(event.currentTarget);
    setOpen(true);
  };
  

• 第二步：在菜单打开后恢复选区
  给Menu组件添加onOpen回调，在菜单加载完成后恢复之前保存的选区：

  const handleMenuOpen = () => {
    if (savedSelection && window.getSelection) {
      const selection = window.getSelection();
      selection.removeAllRanges();
      // 恢复保存的选区范围
      if (savedSelection.rangeCount > 0) {
        selection.addRange(savedSelection.getRangeAt(0));
      }
    }
  };
  

• 第三步：绑定回调到Menu组件
  将onOpen回调绑定到Menu组件上：

  <Menu
    anchorEl={anchorEl}
    open={open}
    onClose={handleClose}
    onOpen={handleMenuOpen}
    // 你的其他配置项
  >
    {/* 菜单项内容 */}
  </Menu>
  

原理说明 #

Firefox在触发contextmenu事件的流程中会主动清除文本选区，而Chrome没有这个默认行为。通过提前保存选区、在菜单完全渲染后恢复的方式，就能规避这个浏览器差异问题。

内容的提问来源于stack exchange，提问作者Ravindra Thorat