[1062] Allow expand/collapse of tree items without selecting them

Bug: #1062 Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
eclipse-sirius · Feb 11, 2022 · b2a9ed4 · b2a9ed4
1 parent c75afc2
commit b2a9ed4
Showing 1 changed file with 29 additions and 28 deletions.
diff --git a/frontend/src/tree/TreeItem.tsx b/frontend/src/tree/TreeItem.tsx
@@ -355,36 +355,37 @@ export const TreeItem = ({
   /* ref, tabindex and onFocus are used to set the React component focusabled and to set the focus to the corresponding DOM part */
   return (
     <>
-      <div
-        className={className}
-        ref={refDom}
-        tabIndex={0}
-        onFocus={onFocus}
-        onKeyDown={onBeginEditing}
-        draggable={draggable}
-        onDragStart={dragStart}
-        onDragOver={dragOver}
-        data-treeitemid={item.id}
-        data-haschildren={item.hasChildren.toString()}
-        data-depth={depth}
-        data-expanded={item.expanded.toString()}
-        data-testid={dataTestid}
-      >
+      <div className={className}>
         <ItemCollapseToggle item={item} depth={depth} onExpand={onExpand} />
-        <div className={styles.content}>
-          <div
-            className={styles.imageAndLabel}
-            onClick={onClick}
-            onDoubleClick={() => item.hasChildren && onExpand(item.id, depth)}
-            title={tooltipText}
-            data-testid={item.label}
-          >
-            {image}
-            {text}
+        <div
+          ref={refDom}
+          tabIndex={0}
+          onFocus={onFocus}
+          onKeyDown={onBeginEditing}
+          draggable={draggable}
+          onDragStart={dragStart}
+          onDragOver={dragOver}
+          data-treeitemid={item.id}
+          data-haschildren={item.hasChildren.toString()}
+          data-depth={depth}
+          data-expanded={item.expanded.toString()}
+          data-testid={dataTestid}
+        >
+          <div className={styles.content}>
+            <div
+              className={styles.imageAndLabel}
+              onClick={onClick}
+              onDoubleClick={() => item.hasChildren && onExpand(item.id, depth)}
+              title={tooltipText}
+              data-testid={item.label}
+            >
+              {image}
+              {text}
+            </div>
+            <IconButton className={styles.more} onClick={openContextMenu} data-testid={`${item.label}-more`}>
+              <More title="More" />
+            </IconButton>
           </div>
-          <IconButton className={styles.more} onClick={openContextMenu} data-testid={`${item.label}-more`}>
-            <More title="More" />
-          </IconButton>
         </div>
       </div>
       {children}