Merge pull request #7571 from cminn10/fix-subtitle-not-clearing-properly

Fix subtitle does not properly clear/remove from the chart

Author: emilykl

draftlogs/7571_fix.md

@@ -0,0 +1 @@
+- Fix `layout.title.subtitle` does not properly clear/remove from the chart when `subtitle` object is not in place, or `subtitle.text` set to `null`, empty string, or whitespace-only values. [[#7571](https://github.com/plotly/plotly.js/pull/7571)]

src/components/titles/index.js

@@ -81,7 +81,7 @@ function draw(gd, titleClass, options) {
     var subtitleEnabled = !!subtitleProp;
     var subtitlePlaceholder = options.subtitlePlaceholder;
     var subtitle = (cont.title || {}).subtitle || {text: '', font: {}};
-    var subtitleTxt = subtitle.text.trim();
+    var subtitleTxt = (subtitle.text || '').trim();
     var subtitleIsPlaceholder = false;
     var subtitleOpacity = 1;
 
@@ -160,7 +160,7 @@ function draw(gd, titleClass, options) {
     var subtitleClass = titleClass + '-subtitle';
     var subtitleElShouldExist = subtitleTxt || editable;
 
-    if(subtitleEnabled && subtitleElShouldExist) {
+    if(subtitleEnabled) {
         subtitleEl = group.selectAll('text.' + subtitleClass)
             .data(subtitleElShouldExist ? [0] : []);
         subtitleEl.enter().append('text');
@@ -231,7 +231,7 @@ function draw(gd, titleClass, options) {
         .attr(attributes)
             .call(svgTextUtils.convertToTspans, gd, adjustSubtitlePosition);
 
-        if(subtitleEl) {
+        if(subtitleEl && !subtitleEl.empty()) {
             // Set subtitle y position based on bottom of title
             // We need to check the Mathjax group as well, in case the Mathjax
             // has already rendered
@@ -405,7 +405,7 @@ function draw(gd, titleClass, options) {
     }
 
     el.classed('js-placeholder', titleIsPlaceholder);
-    if(subtitleEl) subtitleEl.classed('js-placeholder', subtitleIsPlaceholder);
+    if(subtitleEl && !subtitleEl.empty()) subtitleEl.classed('js-placeholder', subtitleIsPlaceholder);
 
     return group;
 }

test/jasmine/tests/titles_test.js

@@ -1027,6 +1027,98 @@ describe('Title automargining', function() {
     });
 });
 
+describe("Subtitle clearing via relayout", function () {
+  "use strict";
+
+  var data = [{ x: [1, 2, 3], y: [1, 2, 3] }];
+  var gd;
+
+  beforeEach(function () {
+    gd = createGraphDiv();
+  });
+
+  afterEach(destroyGraphDiv);
+
+  it("should properly clear subtitle when set to null", function (done) {
+    Plotly.newPlot(gd, data, {
+      title: {
+        text: "Main Title",
+        subtitle: { text: "Subtitle Text" },
+      },
+    })
+      .then(function () {
+        var subtitleSel = d3Select(".gtitle-subtitle");
+        expect(subtitleSel.empty()).toBe(
+          false,
+          "Subtitle should exist initially"
+        );
+        expect(subtitleSel.text()).toBe("Subtitle Text");
+
+        return Plotly.relayout(gd, { "title.subtitle.text": null });
+      })
+      .then(function () {
+        var subtitleSel = d3Select(".gtitle-subtitle");
+        expect(subtitleSel.empty()).toBe(
+          true,
+          "Subtitle should be removed when set to null"
+        );
+      })
+      .then(done, done.fail);
+  });
+
+  it("should properly clear subtitle when set to empty string", function (done) {
+    Plotly.newPlot(gd, data, {
+      title: {
+        text: "Main Title",
+        subtitle: { text: "Subtitle Text" },
+      },
+    })
+      .then(function () {
+        var subtitleSel = d3Select(".gtitle-subtitle");
+        expect(subtitleSel.empty()).toBe(
+          false,
+          "Subtitle should exist initially"
+        );
+
+        return Plotly.relayout(gd, { "title.subtitle.text": "" });
+      })
+      .then(function () {
+        var subtitleSel = d3Select(".gtitle-subtitle");
+        expect(subtitleSel.empty()).toBe(
+          true,
+          "Subtitle should be removed when set to empty string"
+        );
+      })
+      .then(done, done.fail);
+  });
+
+  it("should properly clear subtitle when set to whitespace", function (done) {
+    Plotly.newPlot(gd, data, {
+      title: {
+        text: "Main Title",
+        subtitle: { text: "Subtitle Text" },
+      },
+    })
+      .then(function () {
+        var subtitleSel = d3Select(".gtitle-subtitle");
+        expect(subtitleSel.empty()).toBe(
+          false,
+          "Subtitle should exist initially"
+        );
+
+        return Plotly.relayout(gd, { "title.subtitle.text": "   " });
+      })
+      .then(function () {
+        var subtitleSel = d3Select(".gtitle-subtitle");
+        expect(subtitleSel.empty()).toBe(
+          true,
+          "Subtitle should be removed when set to whitespace"
+        );
+      })
+      .then(done, done.fail);
+  });
+});
+
 function expectTitle(expTitle) {
     expectTitleFn(expTitle)();
 }