feat(dia.Paper): add focus and blur events; expose them as @joint/react Paper props - #3481
Open
kumilingus wants to merge 5 commits into
Open
feat(dia.Paper): add focus and blur events; expose them as @joint/react Paper props#3481kumilingus wants to merge 5 commits into
kumilingus wants to merge 5 commits into
Conversation
The paper turns the (bubbling) native focusin/focusout DOM events into cell:/element:/link:/blank: paper events, following the mouseover/ mouseout pattern — so applications can react to keyboard focus on cells (e.g. focusable cells via the root tabindex attribute) without binding native DOM listeners on the paper element.
A focus event outside of a cell view carries no useful information — keep the API surface to the cell:/element:/link: variants.
kumilingus
force-pushed
the
feat/paper-focus-events
branch
from
August 24, 2026 20:57
a02a8fe to
b9a30b8
Compare
…blur The paper events are driven by the bubbling focusin/focusout DOM events (plain focus/blur do not bubble), but the cell:focus/cell:blur names describe what happened to the cell — and match the naming @joint/react already ships. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…ement/link variants The ReactPaper focusin/focusout delegation workaround is no longer needed — dia.Paper now emits cell:focus/cell:blur natively under the same names, so onCellFocus/onCellBlur keep working unchanged. Expose the new element:/link: variants as onElementFocus, onElementBlur, onLinkFocus and onLinkBlur. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
onCellFocus/onCellBlur never shipped in a release (no changeset existed for their addition), so the changelog entry covers the whole feature. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
kumilingus
added a commit
to kumilingus/joint
that referenced
this pull request
Aug 26, 2026
Changesets were introduced after these commits landed on dev. Most of the dev work was cherry-picked to master and released via the changeset backfill there (clientIO#3467, v4.3.2-v4.3.5) — the only changes on dev absent from any published release are the Map-backed cells container (clientIO#3423) and the collection-accepting removeCells()/resetCells() (clientIO#3427). The cell focus events from clientIO#3427 are excluded: their changeset lives on the feat/paper-focus-events branch (clientIO#3481). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Adds
focus/blurpaper events with thecell:/element:/link:variants, following themouseover/mouseoutpattern (same guard, samefindViewresolution,cell:*fired beforeelement:*/link:*via the viewnotifychain), and exposes them in@joint/reactas Paper event props.The paper events are driven by the bubbling
focusin/focusoutDOM events — plainfocus/blurdo not bubble and so cannot be delegated (the same reason React's ownonFocus/onBlurusefocusin/focusoutunder the hood). The event names describe what happened to the cell.normalizeEventis not applied (nothing to normalize on focus events). Noblank:variants — a focus event outside of a cell view carries no useful information.Motivation
Making cells keyboard-focusable (
tabindexon the root viaattrs) is a common accessibility approach; reacting to the focus currently requires a native DOM listener onpaper.el. With this change:or in React:
Changes
@joint/coredia/Paper.mjs—focusin/focusoutin theeventshash + handlersdia/CellView.mjs,dia/ElementView.mjs,dia/LinkView.mjs—focusin/focusoutmethods notifying thecell:/element:/link:focus/blureventstypes/dia.d.ts— the 6 new event signaturestest/jointjs/paper.js— event order + no event outside of cell views (native bubblingFocusEvents; the test$.fn.triggershim dispatches non-bubblingCustomEvents)@joint/core: minor)@joint/reactpresets/paper.ts— theReactPaperfocusin .joint-celldelegation workaround is deleted; the core now emitscell:focus/cell:blurnatively under the same names, so the existingonCellFocus/onCellBlurprops keep working unchanged (no API break)presets/paper-events.ts— newonElementFocus,onElementBlur,onLinkFocusandonLinkBlurprops for theelement:/link:variantspaper-focus-events.test.tsx— coverage for the element/link variants@joint/react: minor)