fix(store): remove action not properly removing elements

e2e/cypress/utils/elements.ts

@@ -8,18 +8,19 @@ export function getElements(xElements = 10, yElements = 10) {
 
   for (let y = 0; y < yElements; y++) {
     for (let x = 0; x < xElements; x++) {
-      const position = { x: x * 100, y: y * 50 }
+      initialNodes.push({
-      const node = {
         id: nodeId.toString(),
-        style: { width: 50, fontSize: 11 },
         label: `Node ${nodeId}`,
-        type: '',
+        style: (node) => {
-        position,
+          const style: Record<string, any> = { width: `50px`, fontSize: `11px`, zIndex: 1 }
+          if (node.selected) style.border = '1px solid red'
+          return style
+        },
+        position: { x: x * 100, y: y * 50 },
         data: {
           randomData: Math.floor(Math.random() * 1e3),
         },
-      }
+      })
-      initialNodes.push(node)
 
       if (recentNodeId && nodeId <= xElements * yElements) {
         initialEdges.push({

packages/vue-flow/src/store/actions.ts

@@ -169,11 +169,23 @@ export default (state: State, getters: ComputedGetters): Actions => {
   }
 
   const removeSelectedNodes: Actions['removeSelectedNodes'] = (nodes) => {
-    nodeSelectionHandler(nodes, false)
+    if (!nodes.length) return nodeSelectionHandler(nodes, false)
+
+    const nodeIds = nodes.map((n) => n.id)
+
+    const changedNodes = nodeIds.map((nodeId) => createSelectionChange(nodeId, false))
+
+    if (changedNodes.length) state.hooks.nodesChange.trigger(changedNodes)
   }
 
   const removeSelectedEdges: Actions['removeSelectedEdges'] = (edges) => {
-    edgeSelectionHandler(edges, false)
+    if (!edges.length) edgeSelectionHandler(edges, false)
+
+    const edgeIds = edges.map((e) => e.id)
+
+    const changedEdges = edgeIds.map((edgeId) => createSelectionChange(edgeId, false))
+
+    if (changedEdges.length) state.hooks.edgesChange.trigger(changedEdges)
   }
 
   const removeSelectedElements: Actions['removeSelectedElements'] = (elements) => {