feat(onElementClick): always allow onElementClick to run

cypress/integration/flow/interaction.spec.js

@@ -12,12 +12,12 @@ describe('Interaction Flow Rendering', () => {
 
   it('tries to select a node by click', () => {
     const pointerEvents = Cypress.$('.react-flow__node:first').css('pointer-events');
-    expect(pointerEvents).to.equal('none');
+    expect(pointerEvents).to.equal('all');
   });
 
   it('tries to select an edge by click', () => {
     const pointerEvents = Cypress.$('.react-flow__edge:first').css('pointer-events');
-    expect(pointerEvents).to.equal('none');
+    expect(pointerEvents).to.equal('all');
   });
 
   it('tries to do a selection', () => {

src/components/Edges/wrapEdge.tsx

@@ -53,15 +53,13 @@ export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
 
     const edgeClasses = cc(['react-flow__edge', `react-flow__edge-${type}`, className, { selected, animated }]);
     const edgeGroupStyle: CSSProperties = {
-      pointerEvents: elementsSelectable ? 'all' : 'none',
+      pointerEvents: elementsSelectable || onClick ? 'all' : 'none',
     };
     const onEdgeClick = (event: React.MouseEvent<SVGGElement, MouseEvent>): void => {
-      if (!elementsSelectable) {
-        return;
+      if (elementsSelectable) {
+        setSelectedElements({ id, source, target });
       }
 
-      setSelectedElements({ id, source, target });
-
       if (onClick) {
         const edgeElement: Edge = { id, source, target, type };
 

src/components/Nodes/wrapNode.tsx

@@ -241,10 +241,10 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
       (event: MouseEvent) => {
         if (!isDraggable && isSelectable) {
           setSelectedElements({ id: node.id, type: node.type } as Node);
+        }
 
-          if (onClick) {
-            onClick(event, node);
-          }
+        if (onClick) {
+          onClick(event, node);
         }
       },
       [isSelectable, isDraggable, node]
@@ -279,7 +279,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
     const nodeStyle: CSSProperties = {
       zIndex: selected ? 10 : 3,
       transform: `translate(${xPos}px,${yPos}px)`,
-      pointerEvents: isSelectable || isDraggable ? 'all' : 'none',
+      pointerEvents: isSelectable || isDraggable || onClick ? 'all' : 'none',
       ...style,
     };