Skip to content

fix: prevent preventing default behaviour on click on blur #231

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
draedful merged 2 commits into from
Feb 3, 2026
Merged

fix: prevent preventing default behaviour on click on blur #231

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6b4f580
fix: prevent preventing default behaviour on click on blur.
draedful Feb 2, 2026
3e4acaa
fix: the same fix for NewBlockLayer and SelectionLayer
draedful Feb 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 21 additions & 9 deletions src/components/canvas/layers/connectionLayer/ConnectionLayer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { GraphMouseEvent, extractNativeGraphMouseEvent } from "../../../../graphEvents";
import { GraphMouseEvent, extractNativeGraphMouseEvent, isGraphEvent } from "../../../../graphEvents";
import { Layer, LayerContext, LayerProps } from "../../../../services/Layer";
import { ESelectionStrategy } from "../../../../services/selection/types";
import { AnchorState } from "../../../../store/anchor/Anchor";
Expand All @@ -9,6 +9,7 @@ import { renderSVG } from "../../../../utils/renderers/svgPath";
import { Point, TPoint } from "../../../../utils/types/shapes";
import { Anchor } from "../../../canvas/anchors";
import { Block } from "../../../canvas/blocks/Block";
import { GraphComponent } from "../../GraphComponent";

type TIcon = {
path: string;
Expand Down Expand Up @@ -157,9 +158,7 @@ export class ConnectionLayer extends Layer<
*/
protected afterInit(): void {
// Register event listeners with the graphOn wrapper method for automatic cleanup when unmounted
this.onGraphEvent("mousedown", this.handleMouseDown, {
capture: true,
});
this.onGraphEvent("mousedown", this.handleMouseDown);

// Call parent afterInit to ensure proper initialization
super.afterInit();
Expand All @@ -173,6 +172,19 @@ export class ConnectionLayer extends Layer<
this.enabled = false;
};

protected checkIsShouldStartCreationConnection(target: GraphComponent, initEvent: MouseEvent) {
if (!this.enabled) {
return false;
}
if (this.context.graph.rootStore.settings.getConfigFlag("useBlocksAnchors")) {
return target instanceof Anchor;
}
if (isShiftKeyEvent(initEvent) && isBlock(target)) {
return true;
}
return false;
}

protected handleMouseDown = (nativeEvent: GraphMouseEvent) => {
const target = nativeEvent.detail.target;
const initEvent = extractNativeGraphMouseEvent(nativeEvent);
Expand All @@ -181,9 +193,8 @@ export class ConnectionLayer extends Layer<
}

if (
this.enabled &&
((this.context.graph.rootStore.settings.getConfigFlag("useBlocksAnchors") && target instanceof Anchor) ||
(isShiftKeyEvent(initEvent) && isBlock(target)))
this.checkIsShouldStartCreationConnection(target as GraphComponent, initEvent) &&
(isBlock(target) || target instanceof Anchor)
) {
// Get the source component state
const sourceComponent = target.connectedState;
Expand All @@ -193,8 +204,9 @@ export class ConnectionLayer extends Layer<
return;
}

nativeEvent.preventDefault();
nativeEvent.stopPropagation();
if (isGraphEvent(nativeEvent)) {
nativeEvent.stopGraphEventPropagation();
}
this.context.graph.dragService.startDrag(
{
onStart: (_event, coords) => this.onStartConnection(target, new Point(coords[0], coords[1])),
Expand Down
9 changes: 6 additions & 3 deletions src/components/canvas/layers/newBlockLayer/NewBlockLayer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { GraphMouseEvent, extractNativeGraphMouseEvent } from "../../../../graphEvents";
import { GraphMouseEvent, extractNativeGraphMouseEvent, isGraphEvent } from "../../../../graphEvents";
import { Layer, LayerContext, LayerProps } from "../../../../services/Layer";
import { ESelectionStrategy } from "../../../../services/selection/types";
import { BlockState } from "../../../../store/block/Block";
Expand Down Expand Up @@ -106,8 +106,11 @@ export class NewBlockLayer extends Layer<
return;
}

nativeEvent.preventDefault();
nativeEvent.stopPropagation();
// nativeEvent.preventDefault();
// nativeEvent.stopPropagation();
if (isGraphEvent(nativeEvent)) {
nativeEvent.stopGraphEventPropagation();
}
// Capture target in closure for onStart callback
const blockTarget = target;
this.context.graph.dragService.startDrag(
Expand Down
9 changes: 6 additions & 3 deletions src/components/canvas/layers/selectionLayer/SelectionLayer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { GraphMouseEvent, extractNativeGraphMouseEvent } from "../../../../graphEvents";
import { GraphMouseEvent, extractNativeGraphMouseEvent, isGraphEvent } from "../../../../graphEvents";
import { Layer, LayerContext, LayerProps } from "../../../../services/Layer";
import { Camera } from "../../../../services/camera/Camera";
import { ESelectionStrategy } from "../../../../services/selection";
Expand Down Expand Up @@ -99,8 +99,11 @@ export class SelectionLayer extends Layer<
}

if (event && isMetaKeyEvent(event)) {
nativeEvent.preventDefault();
nativeEvent.stopPropagation();
// nativeEvent.preventDefault();
// nativeEvent.stopPropagation();
if (isGraphEvent(nativeEvent)) {
nativeEvent.stopGraphEventPropagation();
}
this.context.graph.dragService.startDrag({
onStart: this.startSelectionRender,
onUpdate: this.updateSelectionRender,
Expand Down
Loading