🐛 replaced labels don't get removed from the DOM on mobile

owid · Feb 20, 2025 · 52aa4d2 · 52aa4d2
1 parent 14cf231
commit 52aa4d2
Showing 1 changed file with 33 additions and 21 deletions.
diff --git a/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx b/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx
@@ -264,18 +264,25 @@ export class VerticalAxisComponent extends React.Component<{
                 id={makeIdForHumanConsumption("vertical-axis")}
                 className="VerticalAxis"
             >
-                {labelTextWrap &&
-                    labelTextWrap.renderSVG(labelX, labelY, {
-                        id: makeIdForHumanConsumption("vertical-axis-label"),
-                        textProps: {
-                            transform: isLabelCentered
-                                ? "rotate(-90)"
-                                : undefined,
-                            fill: labelColor || GRAPHER_DARK_TEXT,
-                            textAnchor: isLabelCentered ? "middle" : "start",
-                        },
-                        detailsMarker,
-                    })}
+                {labelTextWrap && (
+                    <React.Fragment key={labelTextWrap.text}>
+                        {labelTextWrap.renderSVG(labelX, labelY, {
+                            id: makeIdForHumanConsumption(
+                                "vertical-axis-label"
+                            ),
+                            textProps: {
+                                transform: isLabelCentered
+                                    ? "rotate(-90)"
+                                    : undefined,
+                                fill: labelColor || GRAPHER_DARK_TEXT,
+                                textAnchor: isLabelCentered
+                                    ? "middle"
+                                    : "start",
+                            },
+                            detailsMarker,
+                        })}
+                    </React.Fragment>
+                )}
                 {showTickMarks && (
                     <g id={makeIdForHumanConsumption("tick-marks")}>
                         {tickLabels.map((label, i) => (
@@ -390,15 +397,20 @@ export class HorizontalAxisComponent extends React.Component<{
                 id={makeIdForHumanConsumption("horizontal-axis")}
                 className="HorizontalAxis"
             >
-                {label &&
-                    label.renderSVG(labelX, labelYPosition, {
-                        id: makeIdForHumanConsumption("horizontal-axis-label"),
-                        textProps: {
-                            fill: labelColor || GRAPHER_DARK_TEXT,
-                            textAnchor: isLabelCentered ? "middle" : "end",
-                        },
-                        detailsMarker,
-                    })}
+                {label && (
+                    <React.Fragment key={label.text}>
+                        {label.renderSVG(labelX, labelYPosition, {
+                            id: makeIdForHumanConsumption(
+                                "horizontal-axis-label"
+                            ),
+                            textProps: {
+                                fill: labelColor || GRAPHER_DARK_TEXT,
+                                textAnchor: isLabelCentered ? "middle" : "end",
+                            },
+                            detailsMarker,
+                        })}
+                    </React.Fragment>
+                )}
                 {showTickMarks && (
                     <g id={makeIdForHumanConsumption("tick-marks")}>
                         {tickLabels.map((label) => (