AG Grid Safari列移动触发单元格全选问题及适配咨询

我之前在ag-grid项目里也遇到过一模一样的Safari专属问题，确实挺头疼的——启用enableCellTextSelection后，拖动列会意外选中所有单元格，甚至把内容拖进浮动筛选器，而且靠简单的userAgent判断还会误识别Edge这类浏览器。给你两个实用的解决方向：

1. 先准确识别Safari浏览器 #

之前的userAgent判断失效是因为Chrome、Edge等基于Chromium的浏览器UA里也会包含Safari字符串，我们可以结合navigator.vendor来精准判断：

function isSafari() {
  const userAgent = window.navigator.userAgent;
  // 匹配Safari但排除Chrome、Edge、Android浏览器
  const isSafariUA = /^((?!chrome|android|edg).)*safari/i.test(userAgent);
  // Apple设备的vendor固定为"Apple Computer, Inc."
  const isAppleVendor = window.navigator.vendor === 'Apple Computer, Inc.';
  return isSafariUA && isAppleVendor;
}

这个方法能准确区分Safari和其他带Safari字符串的浏览器，不会误判Edge。

2. 针对Safari解决拖动列选中文本的问题 #

方案A：针对Safari禁用单元格文本选择 #

如果你的业务可以接受Safari下不开启单元格文本选择，那么可以动态设置enableCellTextSelection：

在你的GridExample组件里添加状态判断：

class GridExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // ...原有状态
      enableTextSelection: true,
    };
  }

  componentDidMount() {
    // 仅非Safari浏览器开启文本选择
    this.setState({
      enableTextSelection: !isSafari()
    });
  }

  render() {
    return (
      // ...原有结构
      <AgGridReact
        // ...其他props
        enableCellTextSelection={this.state.enableTextSelection}
      />
    );
  }
}

方案B：拖动列时临时禁用页面文本选择 #

如果需要保留Safari下的单元格文本选择功能，我们可以利用ag-grid的列拖动事件，在拖动开始时禁用页面文本选择，结束后恢复：

class GridExample extends Component {
  // ...原有方法

  onColumnDragStarted = () => {
    if (isSafari()) {
      // 禁用页面所有元素的文本选择
      document.body.style.userSelect = 'none';
    }
  };

  onColumnDragEnded = () => {
    if (isSafari()) {
      // 恢复文本选择
      document.body.style.userSelect = '';
    }
  };

  render() {
    return (
      // ...原有结构
      <AgGridReact
        // ...其他props
        onColumnDragStarted={this.onColumnDragStarted}
        onColumnDragEnded={this.onColumnDragEnded}
      />
    );
  }
}

这个方案既保留了文本选择功能，又避免了拖动列时的意外选中问题，体验更友好。

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