The latest articles on Forem by Ashish Khokhariya (@khokhariya30oct). https://forem.com/khokhariya30oct https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3728124%2Fd864e414-fb15-4bf1-881d-902565e77999.jpeg https://forem.com/khokhariya30oct en Ashish Khokhariya Fri, 23 Jan 2026 10:01:12 +0000 https://forem.com/khokhariya30oct/bpmn-js-6x-context-pad-not-working-in-chrome-144-root-cause-practical-fix-57hp https://forem.com/khokhariya30oct/bpmn-js-6x-context-pad-not-working-in-chrome-144-root-cause-practical-fix-57hp <h2> TL;DR </h2> <p>If you're using <strong>bpmn-js 6.x</strong> with <strong>Chrome 144</strong>, clicking on BPMN states no longer opens the <strong>context pad</strong>.<br><br> The click is incorrectly detected as a <strong>background click</strong>.</p> <p>This post explains <strong>why it happens</strong> and shares a <strong>production-safe workaround</strong> using hover events.</p> <h2> Problem Statement </h2> <p>While working with <strong>bpmn-js 6.x</strong>, I noticed a strange issue after upgrading to <strong>Chrome 144</strong>:</p> <ul> <li>Clicking a BPMN element (task/state) </li> <li>Context pad does NOT open </li> <li>BPMN thinks the background was clicked </li> <li> <code>element.click</code> becomes unreliable </li> <li>Hover events still work</li> </ul> <p>This makes the editor almost unusable.</p> <h2> Root Cause (What’s Really Happening) </h2> <p>This is a <strong>version incompatibility issue</strong>:</p> <ul> <li> <strong>bpmn-js 6.x</strong> relies on older DOM / event handling</li> <li> <strong>Chrome 144</strong> changed internal click resolution behavior</li> <li>Result: <ul> <li>Click event bubbles as <strong>canvas/background click</strong> </li> <li>BPMN does not detect the actual element</li> <li>Context pad never opens</li> </ul> </li> </ul> <p>Strangely:</p> <ul> <li> <code>hover</code> events still fire correctly</li> <li> <code>mouseup</code> events are partially detectable</li> </ul> <h2> Strategy to Fix It </h2> <p>Since <strong>click detection is broken</strong>, the workaround is:</p> <ol> <li>Detect <strong>hovered element</strong> </li> <li>Track last hovered BPMN state</li> <li>On mouse up: <ul> <li>If BPMN thinks background was clicked</li> <li>Force open context pad on last hovered element</li> </ul> </li> </ol> <p>This avoids patching BPMN internals and is <strong>safe for production</strong>.</p> <h2> Working Fix (Chrome 144 + bpmn-js 6.x) </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> js // Fix for context pad not showing on click in Chrome 144 with bpmn-js 6.x this.on('import.done', () =&gt; { 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) =&gt; { if (event.element.type !== 'bpmn:Process') { lastHoveredElement = event.element; } }); // Clear hover when mouse leaves eventBus.on('element.out', (event) =&gt; { if (event.element === lastHoveredElement) { lastHoveredElement = null; } }); // Handle mouseup fallback eventBus.on('element.mouseup', (event) =&gt; { // Chrome 144 bug: BPMN thinks background was clicked if (event.element?.type === 'bpmn:Process' &amp;&amp; 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); } }); </code></pre> </div> bpmn chrome javascript vue