wip

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte

@@ -66,6 +66,8 @@
       componentTreeNodesStore.expandNodes([component._id])
     },
     ["ArrowLeft"]: component => {
+      // Select the collapsing root component to ensure the currently selected component is not
+      // hidden in a collapsed node
       componentStore.select(component._id)
       componentTreeNodesStore.collapseNodes([component._id])
     },
@@ -74,8 +76,8 @@
       componentTreeNodesStore.expandNodes(childIds)
     },
     ["Ctrl+ArrowLeft"]: component => {
-      // Select the collapsing root component to ensure the currently selected component is hidden
-      // due to this action
+      // Select the collapsing root component to ensure the currently selected component is not
+      // hidden in a collapsed node
       componentStore.select(component._id)
 
       const childIds = getChildIdsForComponent(component)

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte

@@ -79,6 +79,11 @@
     return findComponentPath($selectedComponent, component._id)?.length > 0
   }
 
+  const handleIconClick = (componentId) => {
+    componentStore.select(componentId)
+    componentTreeNodesStore.toggleNode(componentId)
+  }
+
   const hover = hoverStore.hover
 </script>
 
@@ -100,7 +105,7 @@
         on:dragend={dndStore.actions.reset}
         on:dragstart={() => dndStore.actions.dragstart(component)}
         on:dragover={dragover(component, index)}
-        on:iconClick={() => componentTreeNodesStore.toggleNode(component._id)}
+        on:iconClick={() => handleIconClick(component._id)}
         on:drop={onDrop}
         hovering={$hoverStore.componentId === component._id}
         on:mouseenter={() => hover(component._id)}