From 9c05aa676674ec990496f02c2be53ad41bc4c417 Mon Sep 17 00:00:00 2001
From: Severiano Badajoz <sbadajoz@chanzuckerberg.com>
Date: Mon, 15 Jul 2019 11:32:42 -0700
Subject: [PATCH] remove selection interaction from categorical value label
 (#847)

---
 client/src/components/categorical/value.js | 30 ++++++++++++----------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/client/src/components/categorical/value.js b/client/src/components/categorical/value.js
index cf1d015b..713964e3 100644
--- a/client/src/components/categorical/value.js
+++ b/client/src/components/categorical/value.js
@@ -131,19 +131,21 @@ class CategoryValue extends React.Component {
             justifyContent: "space-between"
           }}
         >
-          <label className="bp3-control bp3-checkbox" style={{ margin: 0 }}>
-            <input
-              onChange={selected ? this.toggleOff : this.toggleOn}
-              data-testclass="categorical-value-select"
-              data-testid={`categorical-value-select-${metadataField}-${displayString}`}
-              checked={selected}
-              type="checkbox"
-            />
-            <span
-              className="bp3-control-indicator"
-              onMouseEnter={this.handleMouseExit}
-              onMouseLeave={this.handleMouseEnter}
-            />
+          <div style={{ display: "flex" }}>
+            <label className="bp3-control bp3-checkbox" style={{ margin: 0 }}>
+              <input
+                onChange={selected ? this.toggleOff : this.toggleOn}
+                data-testclass="categorical-value-select"
+                data-testid={`categorical-value-select-${metadataField}-${displayString}`}
+                checked={selected}
+                type="checkbox"
+              />
+              <span
+                className="bp3-control-indicator"
+                onMouseEnter={this.handleMouseExit}
+                onMouseLeave={this.handleMouseEnter}
+              />
+            </label>
             <span
               data-testid={`categorical-value-${metadataField}-${displayString}`}
               data-testclass="categorical-value"
@@ -151,7 +153,7 @@ class CategoryValue extends React.Component {
             >
               {displayString}
             </span>
-          </label>
+          </div>
           <span style={{ flexShrink: 0 }}>
             {colorAccessor && !isColorBy ? (
               <Occupancy category={category} {...this.props} />