antvis / S2

⚡️ A practical visualization library for tabular analysis.

Home Page:https://s2.antv.antgroup.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

🐛空字符单元格鼠标聚焦错误

Gxyrious opened this issue · comments

🏷 Version

Package Version
@antv/s2 2.0.0-next.15
@antv/s2-react
@antv/s2-vue

Sheet Type

  • PivotSheet
  • TableSheet
  • GridAnalysisSheet
  • StrategySheet
  • EditableSheet

🖋 Description

  1. 当数据中出现空字符或null(在placeholder = ''的前提下),移动鼠标,单元格有时候会聚焦到空单元格上去。
  2. 如果设置S2Options.interaction.selectedCellHighlight.currentRow = true,滚动一段距离后点击,高亮的行会错误。

⌨️ Code Snapshots

4054fb4d0f946b3cde9c -middle-original

基于这个明细表性能表现的示例改了改:https://s2.antv.antgroup.com/zh/examples/case/performance-compare#table

  • 减少了数据数量
  • 添加了一些空数据
  • 更改了s2Options中的plateholder
import { S2DataConfig, S2Options, TableSheet } from '@antv/s2';

const s2Options: S2Options = {
  interaction: {
    selectedCellHighlight: {
      currentRow: true,
    },
  },
  placeholder: '',
};

export function generateRawData(
  row: Record<string, number>,
  col: Record<string, number>,
) {
  const res: Record<string, any>[] = [];

  const rowKeys = Object.keys(row);
  const colKeys = Object.keys(col);

  for (let i = 0; i < row[rowKeys[0]]; i++) {
    for (let j = 0; j < row[rowKeys[1]]; j++) {
      for (let m = 0; m < col[colKeys[0]]; m++) {
        for (let n = 0; n < col[colKeys[1]]; n++) {
          res.push({
              province: `p${i}`,
              city: (i + j + m + n) % 2 ? `c${j}` : ``,
              type: `type${m}`,
              subType: `subType${n}`,
              number: i * n,
            });
        }
      }
    }
  }

  return res;
}

const s2DataConfig: S2DataConfig = {
  fields: {
    columns: ['province', 'city', 'type', 'subType', 'number'],
  },
  data: generateRawData(
    { province: 10, city: 2 },
    { type: 10, sub_type: 2 },
  ),
};

async function bootstrap() {
  const container = document.getElementById('container');

  const s2 = new TableSheet(container, s2DataConfig, s2Options);

  await s2.render();
}

bootstrap();

🔗 Reproduce Link

🤔 Steps to Reproduce

如上,直接把代码粘贴到官网示例即可。

😊 Expected Behavior

希望高亮的单元格是聚焦在鼠标所hover的位置

😅 Current Behavior

高亮的单元格时常会偏移到空数据单元格上去

💻 System information

Environment Info
System Ubuntu 22.04.1 LTS
Browser Chrome v119.0.6045.159(64位),firefox122.0.1(64位)

你好 @Gxyrious,很抱歉给你带来了不好的体验, 我们会尽快排查问题并修复, 请关注后续发布日志.

Hello, @Gxyrious, We are so sorry for the bad experience. We will troubleshoot and fix the problem as soon as possible. Please pay attention to the follow-up change logs.

试了下没有复现, 官网现在运行的是 2.0.0-next.16, 可以再试试

更新了2.0.0-next.16试了试,确实没问题