From a7bb365b313c862cdffbb296bbc5a3accd52e7d7 Mon Sep 17 00:00:00 2001
From: archmoj <mojtaba@plot.ly>
Date: Tue, 4 Aug 2020 12:31:21 -0400
Subject: [PATCH] update title and tick labels while react to data with
 transitions

---
 src/plot_api/plot_api.js          |  2 ++
 test/jasmine/tests/titles_test.js | 57 +++++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+)

diff --git a/src/plot_api/plot_api.js b/src/plot_api/plot_api.js
index 17ba52c2908..e3f07796256 100644
--- a/src/plot_api/plot_api.js
+++ b/src/plot_api/plot_api.js
@@ -2769,6 +2769,8 @@ function react(gd, data, layout, config) {
         // when at least one animatable attribute has changed,
         // N.B. config changed aren't animatable
         if(newFullLayout.transition && !configChanged && (restyleFlags.anim || relayoutFlags.anim)) {
+            if(relayoutFlags.ticks) seq.push(subroutines.doTicksRelayout);
+
             Plots.doCalcdata(gd);
             subroutines.doAutoRangeAndConstraints(gd);
 
diff --git a/test/jasmine/tests/titles_test.js b/test/jasmine/tests/titles_test.js
index 9da52ddda25..b3a180a0181 100644
--- a/test/jasmine/tests/titles_test.js
+++ b/test/jasmine/tests/titles_test.js
@@ -621,6 +621,63 @@ describe('Titles can be updated', function() {
     }
 });
 
+describe('Titles and labels', function() {
+    'use strict';
+
+    var gd;
+    beforeEach(function() { gd = createGraphDiv(); });
+    afterEach(destroyGraphDiv);
+
+    it('should react with transition', function(done) {
+        Plotly.newPlot(gd, {
+            data: [
+                {
+                    type: 'bar',
+                    x: ['a', 'b'],
+                    y: [1, 2],
+                }
+            ],
+            layout: {
+                title: {
+                    text: 'OLD'
+                },
+                xaxis: {
+                    title: {
+                        text: 'x-old'
+                    }
+                }
+            }
+        }).then(function() {
+            Plotly.react(gd, {
+                data: [
+                    {
+                        type: 'bar',
+                        x: ['b', 'a'],
+                        y: [3, 2],
+                    }
+                ],
+                layout: {
+                    title: {
+                        text: 'NEW'
+                    },
+                    xaxis: {
+                        title: {
+                            text: 'x-new'
+                        }
+                    },
+                    transition: { duration: 500 }
+                }
+            });
+        }).then(function() {
+            expectTitle('NEW');
+            expect(xTitleSel().text()).toBe('x-new');
+            expect(d3.select('.xtick').text()).toBe('b');
+        })
+        .catch(fail)
+        .then(done);
+    });
+});
+
 describe('Titles support setting custom font properties', function() {
     'use strict';