fix(interaction): Fix unset focused state

Before setting focused state, make sure to remove possible previous focused state by removing "_expanded_" class. Fix #2927
naver · Oct 28, 2022 · 14f6de6 · 14f6de6
1 parent b8396a0
commit 14f6de6
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 7 deletions.
diff --git a/src/ChartInternal/interactions/interaction.ts b/src/ChartInternal/interactions/interaction.ts
@@ -28,14 +28,13 @@ export default {
 			}
 		}
 
-		const shapeAtIndex = main.selectAll(`.${$SHAPE.shape}-${index}`)
-			.each(function() {
-				d3Select(this).classed($COMMON.EXPANDED, true);
+		// remove possible previous focused state
+		main.selectAll(`.${$COMMON.EXPANDED}:not(.${$SHAPE.shape}-${index})`)
+			.classed($COMMON.EXPANDED, false);
 
-				if (isSelectionEnabled) {
-					eventRect.style("cursor", isSelectionGrouped ? "pointer" : null);
-				}
-			})
+		const shapeAtIndex = main.selectAll(`.${$SHAPE.shape}-${index}`)
+			.classed($COMMON.EXPANDED, true)
+			.style("cursor", isSelectable ? "pointer" : null)
 			.filter(function(d) {
 				return $$.isWithinShape(this, d);
 			});

diff --git a/test/interactions/interaction-spec.ts b/test/interactions/interaction-spec.ts
@@ -563,6 +563,36 @@ describe("INTERACTION", () => {
 					done();
 				});
 			});
+
+			it("should focused/defocused state class set & unset correctly.", done => {
+				new Promise(resolve => {
+					util.hoverChart(chart, "mousemove", {
+						clientX: 360,
+						clientY: 300
+					});
+
+					setTimeout(resolve, 300);
+				}).then(() => {
+					new Promise(resolve => {
+						util.hoverChart(chart, "mousemove", {
+							clientX: 240,
+							clientY: 300
+						});
+
+						setTimeout(resolve, 300);
+					});
+				}).then(() => {
+					const expanded = chart.$.bar.bars.filter(`.${$COMMON.EXPANDED}`);
+
+					expect(expanded.size()).to.be.equal(chart.data().length);
+
+					expanded.each(d => {
+						expect(d.index).to.be.equal(2);
+					});
+
+					done();
+				});
+			});
 		});
 
 		describe("check for data.onclick", () => {