diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte index b304219a36..7e9c113a77 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte +++ b/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) diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte index 00435eff3e..32aa7ce7e9 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte +++ b/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 @@ -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)}