diff --git a/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.css b/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.css
index 1304c276cc711..37e0d9dbd5e00 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.css
@@ -27,7 +27,7 @@
 .Name,
 .NameAnonymous {
   flex: 0 0 auto;
-  user-select: none;
+  cursor: default;
 }
 .Name {
   color: var(--color-dim);
@@ -39,7 +39,7 @@
 .EditableName {
   color: var(--color-attribute-name);
   flex: 0 0 auto;
-  user-select: none;
+  cursor: default;
 }
 .EditableName:after,
 .Name:after {
@@ -52,6 +52,7 @@
   color: var(--color-attribute-value);
   overflow: hidden;
   text-overflow: ellipsis;
+  cursor: default;
 }
 
 .None {
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js b/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js
index b02e8faa95f39..a59a0cad25950 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js
@@ -208,7 +208,9 @@ function HookView({canEditHooks, hook, id, inspectPath, path}: HookViewProps) {
               {name || 'Anonymous'}
             </span>{' '}
             {/* $FlowFixMe */}
-            <span className={styles.Value}>{displayValue}</span>
+            <span className={styles.Value} onClick={toggleIsOpen}>
+              {displayValue}
+            </span>
           </div>
           <div className={styles.Children} hidden={!isOpen}>
             {subHooksView}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
index ca523c1506492..a984ac76df530 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
@@ -5,12 +5,12 @@
 .Name {
   color: var(--color-dim);
   flex: 0 0 auto;
-  user-select: none;
+  cursor: default;
 }
 .EditableName {
   color: var(--color-attribute-name);
   flex: 0 0 auto;
-  user-select: none;
+  cursor: default;
 }
 .EditableName:after,
 .Name:after {
@@ -24,6 +24,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  cursor: default;
 }
 
 .None {
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
index 07e7337d501c5..8e9543f31c9c7 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
@@ -127,7 +127,11 @@ export default function KeyValue({
           onClick={isInspectable ? toggleIsOpen : undefined}>
           {name}
         </span>
-        <span className={styles.Value}>{getMetaValueLabel(value)}</span>
+        <span
+          className={styles.Value}
+          onClick={isInspectable ? toggleIsOpen : undefined}>
+          {getMetaValueLabel(value)}
+        </span>
       </div>
     );
   } else {
@@ -165,7 +169,11 @@ export default function KeyValue({
             onClick={hasChildren ? toggleIsOpen : undefined}>
             {name}
           </span>
-          <span className={styles.Value}>{displayName}</span>
+          <span
+            className={styles.Value}
+            onClick={hasChildren ? toggleIsOpen : undefined}>
+            {displayName}
+          </span>
         </div>,
       );
     } else {
@@ -211,7 +219,11 @@ export default function KeyValue({
             onClick={hasChildren ? toggleIsOpen : undefined}>
             {name}
           </span>
-          <span className={styles.Value}>{displayName}</span>
+          <span
+            className={styles.Value}
+            onClick={hasChildren ? toggleIsOpen : undefined}>
+            {displayName}
+          </span>
         </div>,
       );
     }