antvis / antvis/G6

[Bug]: 当 node 中存在 input 元素时,多次更新数据会导致 input 失去焦点

Open
#7,315 3 comments 0 reactions 0 assignees View on GitHub
question 💬
Dominant language
TypeScript
Stars
12.3k
Forks
1.6k
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug / 问题描述

使用 g6 实现血缘图。

- @antv/g6@^5.0.49
- @antv/g-svg@^2.0.38

血缘图节点大致结构如下:
```
┌──────────────────────────────┐
│ Title │ ← title 区域,默认的连接点位于 title 的中间位置
├──────────────────────────────┤ ← 分割线
│ Body (body) │
│ ┌────────────────────────┐ │
│ │ Search │ │ ← search 区域
│ ├────────────────────────┤ │
│ │ Field 1 │ │ ← field,字段的连接点将位于 field 的中间位置
│ ├────────────────────────┤ │
│ │ Field 2 │ │
│ ├────────────────────────┤ │
│ │ Field 3 │ │
│ ├────────────────────────┤ │
│ │ ... │ │
│ ├────────────────────────┤ │
│ │ Footer │ │ ← footer 区域,如果是连接到 footer 的节点,连接点位于 footer 的中间位置
│ └────────────────────────┘ │
└──────────────────────────────┘
```

search 区域是一个输入框 input,会根据输入的关键字过滤要展示的字段。
input 元素的内容发生改变时,会调用 updateQuery。
这个过程中会根据一些条件判断要展示的字段,包含移除、更新和新增,因此需要调用三个 api,然而这种实现方式会导致 input 在输入过程中失去焦点。
如果减少一些调用,比如只新增、或者只更新,或者只有移除和更新,可能避免,但依旧会出现这种问题。

updateQuery 伪代码如下:
```typescript
const updateQuery = (graph, id, query) => {
graph.updateNodeData();

if (需要移除一些 edge) {
graph.removeEdgeData();
}

if (需要更新一些 edge) {
graph.updateEdgeData();
}

if (需要添加 edge) {
graph.addEdgeData();
}

graph.draw();
};
```

blur event 的几个属性:
```
{
isTrusted: true,
relatedEvent: null,
target: InputElement,
}
```

### Reproduction link / 复现链接

_No response_

### Steps to Reproduce the Bug or Issue / 重现步骤

_No response_

### Version / 版本

🆕 5.x

### OS / 操作系统

- [x] macOS
- [ ] Windows
- [ ] Linux
- [ ] Others / 其他

### Browser / 浏览器

- [x] Chrome
- [ ] Edge
- [ ] Firefox
- [ ] Safari (Limited support / 有限支持)
- [ ] IE (Nonsupport / 不支持)
- [ ] Others / 其他

Contributor guide

No contributing guide indexed for this repository

Research direction

Start from the reported updateQuery sequence and reproduce it with a node containing an input, triggering graph.updateNodeData, edge removal, edge updates, edge additions, and graph.draw. Investigate which operation causes the input blur and verify that repeated filtering preserves focus while the displayed fields and edges remain correct.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.