fix(tooltip): Fix for mobile environment (#616)

- Prevent when instances are empty - Prevent circular call for certain cases Fix #593 Close #616
naver · Oct 23, 2018 · 981bc77 · 981bc77
1 parent 0299627
commit 981bc77
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/spec/internals/tooltip-spec.js b/spec/internals/tooltip-spec.js
@@ -362,6 +362,11 @@ describe("TOOLTIP", function() {
 			spy2.resetHistory();
 		});
 
+		it("should not be throwing error", () => {
+			chart.internal.charts = null;
+			expect(() => chart.internal._handleLinkedCharts()).to.not.throw();
+		});
+
 		it("set options tooltip.linked=false", () => {
 			args.tooltip.linked = false;
 			args2.tooltip.order = spy2;

diff --git a/src/interactions/interaction.js b/src/interactions/interaction.js
@@ -395,6 +395,7 @@ extend(ChartInternal.prototype, {
 		$$.svg.select(`.${CLASS.eventRect}`).style("cursor", null);
 		$$.hideXGridFocus();
 		$$.hideTooltip();
+		$$._handleLinkedCharts(false);
 		$$.unexpandCircles();
 		$$.unexpandBars();
 	},

diff --git a/src/internals/tooltip.js b/src/internals/tooltip.js
@@ -229,10 +229,12 @@ extend(ChartInternal.prototype, {
 		}
 
 		const datum = $$.tooltip.datum();
+		const dataStr = JSON.stringify(selectedData);
 		let width = (datum && datum.width) || 0;
 		let height = (datum && datum.height) || 0;
 
-		if (!datum || datum.current !== JSON.stringify(selectedData)) {
+		if (!datum || datum.current !== dataStr) {
+			const index = selectedData[0].index;
 			const html = config.tooltip_contents.call(
 				$$,
 				selectedData,
@@ -247,13 +249,14 @@ extend(ChartInternal.prototype, {
 			$$.tooltip.html(html)
 				.style("display", "block")
 				.datum({
-					current: JSON.stringify(selectedData),
+					index,
+					current: dataStr,
 					width: width = $$.tooltip.property("offsetWidth"),
 					height: height = $$.tooltip.property("offsetHeight")
 				});
 
 			callFn(config.tooltip_onshown, $$);
-			$$._handleLinkedCharts(true, selectedData[0].index);
+			$$._handleLinkedCharts(true, index);
 		}
 
 		// Get tooltip dimensions
@@ -279,7 +282,6 @@ extend(ChartInternal.prototype, {
 		this.tooltip.style("display", "none").datum(null);
 
 		callFn(config.tooltip_onhidden, $$);
-		$$._handleLinkedCharts(false);
 	},
 
 	/**
@@ -294,19 +296,24 @@ extend(ChartInternal.prototype, {
 		if ($$.config.tooltip_linked) {
 			const linkedName = $$.config.tooltip_linked_name;
 
-			$$.api.internal.charts.forEach(c => {
+			($$.api.internal.charts || []).forEach(c => {
 				if (c !== $$.api) {
-					const internal = c.internal;
-					const isLinked = internal.config.tooltip_linked;
-					const name = internal.config.tooltip_linked_name;
+					const config = c.internal.config;
+					const isLinked = config.tooltip_linked;
+					const name = config.tooltip_linked_name;
 					const isInDom = document.body.contains(c.element);
 
 					if (isLinked && linkedName === name && isInDom) {
-						const isShowing = internal.tooltip.style("display") === "block";
+						const data = c.internal.tooltip.data()[0];
+						const isNotSameIndex = index !== (data && data.index);
 
 						// prevent throwing error for non-paired linked indexes
 						try {
-							isShowing ^ show && c.tooltip[isShowing ? "hide" : "show"]({index});
+							if (show && isNotSameIndex) {
+								c.tooltip.show({index});
+							} else if (!show) {
+								c.tooltip.hide();
+							}
 						} catch (e) {}
 					}
 				}