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

Bug: #1062 Signed-off-by: Pierre-Charles David <[email protected]>
eclipse-sirius · Feb 11, 2022 · 17e362c · 17e362c
1 parent c75afc2
commit 17e362c
Showing 1 changed file with 30 additions and 29 deletions.
diff --git a/frontend/src/tree/TreeItem.tsx b/frontend/src/tree/TreeItem.tsx
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2019, 2021 Obeo.
+ * Copyright (c) 2019, 2022 Obeo.
  * This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v2.0
  * which accompanies this distribution, and is available at
@@ -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}