[Bug]: Brush X Interaction Stuck When Mouse Leaves Chart Area in Ant Design Charts (G2 Plot)

[Mathwog47]

Describe the bug / 问题描述

When using the brush-x interaction in Ant Design Charts (based on G2), the brush filter remains stuck or active if the user begins a brush action and then moves the mouse outside the chart area before releasing the mouse button.

As a result:

The selected filter range is not cleared or finalized.

The chart remains in a partially filtered or frozen state.

There's no intuitive way for the user to cancel the selection unless they interact with the brush again inside the chart.

Reproduction link / 复现链接

No response

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

1.Set up a chart using the following config:

const config = { data: [...], xField: 'date', yField: 'value', interactions: [{ type: 'brush-x' }], };

2.Render the chart using Ant Design Charts (e.g., <Line {...config} />).

3.Click and hold inside the chart to start a brush-x drag.

4.While holding the mouse button, move the pointer outside the chart area.

5.Release the mouse button outside the chart.

6.The filter remains stuck, and the brush selection is not cleared.

Version / 版本

🆕 5.x

OS / 操作系统

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

Browser / 浏览器

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

[hustcc]

@Mathwog47 Good issue, The expectation is that clicking outside the chart will also cancel the brush selection, right?

There is currently an issue. You can manually listen for click events outside the chart and then trigger the cancellation of the brush operation.

[interstellarmt]

BTW, you can refer to this example: https://g2.antv.antgroup.com/en/manual/faq#how-to-adjust-legend-component-size-and-layout

[Mathwog47]

I will try to get a mouse click event if made out of the chart, but, is there any way or function from the chart config that could stop the filter.I will need some function or prop to stop the filter from antd chart when clicking outing the chart.What is the function or prop that could trigger cancellation of brush?

[interstellarmt]

I will try to get a mouse click event if made out of the chart, but, is there any way or function from the chart config that could stop the filter.I will need some function or prop to stop the filter from antd chart when clicking outing the chart.What is the function or prop that could trigger cancellation of brush?

There isn’t a direct "brush: reset" event, but you can refer to this example.
https://g2.antv.antgroup.com/en/examples/interaction/brush/#reset-brush

[Mathwog47]

didn't work well, any other solution possible?