From e7a690ca7898f2d7e96517cab2cd8fed9da1ef53 Mon Sep 17 00:00:00 2001
From: Mojtaba Samimi <arch.mojtaba.samimi@gmail.com>
Date: Fri, 20 Oct 2023 09:02:02 -0400
Subject: [PATCH] clear empty boxes and candlestick - fixing 4729

---
 src/traces/box/plot.js             |  2 +-
 test/jasmine/tests/finance_test.js | 42 ++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/traces/box/plot.js b/src/traces/box/plot.js
index 3249457c8c5..2a8a654cad6 100644
--- a/src/traces/box/plot.js
+++ b/src/traces/box/plot.js
@@ -81,7 +81,7 @@ function plotBoxAndWhiskers(sel, axes, trace, t, isStatic) {
     paths.exit().remove();
 
     paths.each(function(d) {
-        if(d.empty) return 'M0,0Z';
+        if(d.empty) return d3.select(this).attr('d', 'M0,0Z');
 
         var lcenter = posAxis.c2l(d.pos + bPos, true);
 
diff --git a/test/jasmine/tests/finance_test.js b/test/jasmine/tests/finance_test.js
index 17ccc749a75..f57ffb3a16c 100644
--- a/test/jasmine/tests/finance_test.js
+++ b/test/jasmine/tests/finance_test.js
@@ -1047,6 +1047,48 @@ describe('finance charts updates:', function() {
         })
         .then(done, done.fail);
     });
+
+    it('should clear empty candlestick boxes using react', function(done) {
+        var type = 'candlestick';
+        var x = [0, 1];
+
+        var steps = [{
+            data: [{
+                close: [132, null],
+                high: [204, 20],
+                low: [30, 193],
+                open: [78, 79],
+                type: type,
+                x: x
+            }],
+            layout: {}
+        },
+        {
+            data: [{
+                close: [140, 78],
+                high: [91, 117],
+                low: [115, 78],
+                open: [null, 97],
+                type: type,
+                x: x
+            }],
+            layout: {}
+        }];
+
+        Plotly.newPlot(gd, steps[0])
+        .then(function() {
+            return Plotly.react(gd, steps[1]);
+        }).then(function() {
+            expect(
+                d3Select('g.cartesianlayer')
+                .selectAll('g.trace.boxes')
+                .selectAll('path')
+                .node()
+                .getAttribute('d')
+            ).toEqual('M0,0Z');
+        })
+        .then(done, done.fail);
+    });
 });
 
 describe('finance charts *special* handlers:', function() {