BPMN-js 6.x Context Pad Not Working in Chrome 144 – Root Cause & Practical Fix

TL;DR

If you're using bpmn-js 6.x with Chrome 144, clicking on BPMN states no longer opens the context pad.

The click is incorrectly detected as a background click.

This post explains why it happens and shares a production-safe workaround using hover events.

---

Problem Statement

While working with bpmn-js 6.x, I noticed a strange issue after upgrading to Chrome 144:

• Clicking a BPMN element (task/state)
• Context pad does NOT open
• BPMN thinks the background was clicked
• element.click becomes unreliable
• Hover events still work

This makes the editor almost unusable.

---

Root Cause (What’s Really Happening)

This is a version incompatibility issue:

• bpmn-js 6.x relies on older DOM / event handling
• Chrome 144 changed internal click resolution behavior
• Result:
  • Click event bubbles as canvas/background click
  • BPMN does not detect the actual element
  • Context pad never opens

Strangely:

• hover events still fire correctly
• mouseup events are partially detectable

---

Strategy to Fix It

Since click detection is broken, the workaround is:

1. Detect hovered element
2. Track last hovered BPMN state
3. On mouse up:
   • If BPMN thinks background was clicked
   • Force open context pad on last hovered element

This avoids patching BPMN internals and is safe for production.

---

Working Fix (Chrome 144 + bpmn-js 6.x)

js
// Fix for context pad not showing on click in Chrome 144 with bpmn-js 6.x

this.on('import.done', () => {
  try {
    const eventBus = this.get('eventBus');
    const contextPad = this.get('contextPad');
    const selection = this.get('selection');

    let lastHoveredElement = null;

    // Track hovered BPMN element
    eventBus.on('element.hover', (event) => {
      if (event.element.type !== 'bpmn:Process') {
        lastHoveredElement = event.element;
      }
    });

    // Clear hover when mouse leaves
    eventBus.on('element.out', (event) => {
      if (event.element === lastHoveredElement) {
        lastHoveredElement = null;
      }
    });

    // Handle mouseup fallback
    eventBus.on('element.mouseup', (event) => {
      // Chrome 144 bug: BPMN thinks background was clicked
      if (event.element?.type === 'bpmn:Process' && lastHoveredElement) {
        try {
          selection.select(lastHoveredElement);
        } catch (e) {
          console.error('Selection error', e);
        }
        contextPad.open(lastHoveredElement);
        return;
      }

      // Normal behavior
      if (event.element?.type !== 'bpmn:Process') {
        contextPad.open(event.element);
      }
    });

  } catch (e) {
    console.error('Context pad workaround init failed', e);
  }
});