From 13d24b623c1ea0a46738e4236ffcf12fa78da627 Mon Sep 17 00:00:00 2001
From: Severiano Badajoz <sbadajoz@chanzuckerberg.com>
Date: Wed, 27 May 2020 13:53:04 -0700
Subject: [PATCH] add span back

---
 .../src/components/categorical/value/index.js | 43 ++++++++++---------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/client/src/components/categorical/value/index.js b/client/src/components/categorical/value/index.js
index b556bd5e..ee9e8d70 100644
--- a/client/src/components/categorical/value/index.js
+++ b/client/src/components/categorical/value/index.js
@@ -15,10 +15,10 @@ import * as globals from "../../../globals";
 import styles from "../categorical.css";
 import AnnoDialog from "../annoDialog";
 import LabelInput from "../labelInput";
+import Truncate from "../../util/truncate";
 
 import { AnnotationsHelpers } from "../../../util/stateManager";
 import { labelPrompt, isLabelErroneous } from "../labelUtil";
-import Truncate from "../../util/truncate";
 
 /* this is defined outside of the class so we can use it in connect() */
 function _currentLabel(ownProps, categoricalSelection) {
@@ -383,26 +383,29 @@ class CategoryValue extends React.Component {
                   : globals.leftSidebarWidth - 145 - 26
               }
               fontSize={12}
-              data-testid={`categorical-value-${metadataField}-${displayString}`}
-              data-testclass="categorical-value"
-              style={{
-                color:
-                  displayString === globals.unassignedCategoryLabel
-                    ? "#ababab"
-                    : "black",
-                fontStyle:
-                  displayString === globals.unassignedCategoryLabel
-                    ? "italic"
-                    : "normal",
-                display: "inline-block",
-                overflow: "hidden",
-                lineHeight: "1.1em",
-                height: "1.1em",
-                wordBreak: "break-all",
-                verticalAlign: "middle",
-              }}
             >
-              {displayString}
+              <span
+                data-testid={`categorical-value-${metadataField}-${displayString}`}
+                data-testclass="categorical-value"
+                style={{
+                  color:
+                    displayString === globals.unassignedCategoryLabel
+                      ? "#ababab"
+                      : "black",
+                  fontStyle:
+                    displayString === globals.unassignedCategoryLabel
+                      ? "italic"
+                      : "normal",
+                  display: "inline-block",
+                  overflow: "hidden",
+                  lineHeight: "1.1em",
+                  height: "1.1em",
+                  wordBreak: "break-all",
+                  verticalAlign: "middle",
+                }}
+              >
+                {displayString}
+              </span>
             </Truncate>
             {editModeActive ? (
               <div>