Skip to content

Grid: Link 字段需要移动鼠标才能点击关联记录 chip #3131

@androidfans

Description

@androidfans

Bug 描述

在 Grid 视图中,点击 link 字段进入编辑模式后,如果不移动鼠标直接点击关联记录的 chip(标签),会打开"选择关联记录"面板,而不是展开关联记录详情。需要先移动一下鼠标(哪怕 1px),cursor 变成小手后再点击才能正确打开。

复现步骤

  1. 打开包含 link 字段的 Grid 视图,link 字段中已有关联记录
  2. 点击某个 link 单元格,使其进入编辑模式(cell 放大,chip 可见)
  3. 不移动鼠标,直接点击某个关联记录 chip

期望行为:打开该关联记录的详情(expand record)
实际行为:打开"选择关联记录"面板,和点击空白区域效果一样

  1. 现在移动鼠标(哪怕 1px),cursor 变成小手 pointer
  2. 再点击 chip → 这次正确打开了关联记录详情

视频对比

Teable(bug — 必须先动鼠标才能点击 chip):

20260510_171431.mp4

NocoDB(正确 — 进入编辑模式后可直接点击 chip):

20260510_171147.mp4

原因分析

问题在 InteractionLayer.tsxonClick handler 中,调用 cellRenderer.onClick 前检查了 hoverCellPosition

if (onCellClick && hoverCellPosition) {
  onCellClick(cell, { ..., hoverCellPosition, ... }, callback);
}

hoverCellPosition 只在 onMouseMove 中通过 useRafState 更新。用户点击时如果没有移动鼠标,hoverCellPosition 仍然是上一次 render 的旧值(null),导致整个 onCellClick 分支被跳过。

useRafState(来自 react-use)通过 requestAnimationFrame 延迟 setState,即使程序化触发 mousemove 事件也无法在同一个事件循环内更新到最新值。

建议修复

onClick 中,当 hoverCellPositionnull 时重新计算:

case RegionType.ActiveCell: {
  const cell = getCellContent([columnIndex, rowIndex]);
  const cellRenderer = getCellRenderer(cell.type);
  const onCellClick = cellRenderer.onClick;
  const isActive = /* ... */;

  // 当 hoverCellPosition 为 null 时用当前 mouseState 重新计算
  const effectiveHoverCellPosition = hoverCellPosition ?? getHoverCellPosition(getMouseState());

  if (onCellClick && effectiveHoverCellPosition) {
    onCellClick(cell, { ..., hoverCellPosition: effectiveHoverCellPosition, ... }, callback);
  }
}

环境

  • Teable 版本:latest Docker (ghcr.io/teableio/teable:latest)
  • 浏览器:Chrome 136
  • 系统:macOS

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions