fix(grid): fix redundant <rect> appends

When grid API is called, empty <rect> elements are appended.
Fix to not append unnecessary nodes.

Fix #3147

src/ChartInternal/internals/region.ts

@@ -28,26 +28,26 @@ export default {
 
 		// hide if arc type
 		region.main.style("visibility", $$.hasArcType() ? "hidden" : null);
-		// select <g> element
 
-		let list = region.main
+		// select <g> element
+		const regions = region.main
 			.selectAll(`.${$REGION.region}`)
 			.data(config.regions);
 
-		$T(list.exit())
+		$T(regions.exit())
 			.style("opacity", "0")
 			.remove();
 
-		list = list.enter()
-			.append("g")
-			.merge(list)
-			.attr("class", $$.classRegion.bind($$));
+		const regionsEnter = regions.enter()
+			.append("g");
 
-		list
+		regionsEnter
 			.append("rect")
 			.style("fill-opacity", "0");
 
-		region.list = list;
+		region.list = regionsEnter
+			.merge(regions)
+			.attr("class", $$.classRegion.bind($$));
 	},
 
 	redrawRegion(withTransition) {

test/api/chart-spec.ts

@@ -49,7 +49,7 @@ describe("API chart", () => {
 		});
 
 		it("should update groups correctly", function(done) {
-			this.timeout(1000);
+			this.timeout(2000);
 
 			const main = chart.$.main;
 			const path = main.select(`.${$BAR.bars}-data1 path`);
@@ -70,7 +70,7 @@ describe("API chart", () => {
 				done();
 			}, 300);
 
-			setTimeout(done, 500);
+			setTimeout(done, 1000);
 		});
 	});
 

test/api/region-spec.ts

@@ -90,6 +90,32 @@ describe("API region", function() {
 				done();
 			}, 1000);
 		});
+
+		it("check for <rect> element generation", () => {
+			// when
+			chart.regions.add({
+				axis: "y",
+				start: 150,
+				end: 200,
+				class: "a",
+			});
+
+			chart.regions.add({
+				axis: "y",
+				start: 200,
+				end: 220,
+				class: "b",
+			});
+
+			const regionList = chart.internal.$el.region.list;
+
+			expect(regionList.size()).to.be.equal(4);
+
+			// regions <rect> element should be 1
+			regionList.each(function(d, i) {
+				expect(this.querySelectorAll("rect").length).to.be.equal(1);
+			});
+		});
 	});
 
 	describe("Add regions using regions()", () => {