Skip to content

fix(Board): end a handle's keyboard activation on a press elsewhere - #103

Merged
agatha197 merged 3 commits into
mainfrom
fix/gh-102-board-clicking-a-handle-leaves
Oct 27, 2026
Merged

agatha197 merged 3 commits into
mainfrom
fix/gh-102-board-clicking-a-handle-leaves

Conversation

@lablup-octodog

@lablup-octodog lablup-octodog commented Oct 27, 2026 •

Copy link
Copy Markdown
Contributor

Resolves #102
Resolves #101

Summary

  • Board: while a handle is activated for keyboard steps (a click without a drag, or Enter / Space), a capture-phase pointerdown listener on the document commits the activation — the same path as Enter and blur — when the press lands anywhere but the active handle and its direction buttons, inside the board or not.
  • After such a commit, focus stays where the press put it; the board no longer moves it back to the handle.
  • A press on the activated handle itself (a second click commits, as before) or on its direction buttons is unchanged. Entering keyboard mode by clicking a handle is kept, for keyboard and assistive-technology users.
  • Tests in Board.test.tsx, and a CHANGELOG.md entry under [Unreleased] / Fixed.
  • Rebased onto main after feat(Board)!: items are a title and a description, padded by the board #68 (items are a title and a description): the tests press elements that exist in that structure.

Why

Clicking a Board item's move or resize handle without dragging puts the item in keyboard mode. That mode ended only on Enter, Escape or the handle's blur, and a press elsewhere inside the board did not always move focus off the handle. The item kept its active outline and kept moving or resizing on the arrow keys (the dashboard in backend.ai-webui, which renders this Board, shows it). #101 reports the same symptom and is closed by this PR too. backend.ai-webui picks the fix up with the next @lablup/ui-common release.

Test plan

  • src/components/Board/Board.test.tsx › pointer:
    • "a press outside the activated handle commits the activation": click a resize handle, step once, press its own direction button (stays active), then press a button in another item's description: the resize is committed and reported, the item leaves its active state, the direction buttons go away, focus stays on the pressed button, and arrow keys no longer step.
    • "a press that leaves focus on the handle still commits the activation": press another item's heading while the handle keeps focus (no blur); the activation is committed.
    • "a press on another handle ends the activation and activates that one".
  • In Storybook, open a Board story with movable / resizable items, click a handle without dragging, then click another item's content: the outline and direction buttons should go away.

Verification

 Test Files  101 passed (101)
      Tests  2163 passed | 10 skipped (2173)
Packed artifact clean: @lablup/ui-common 1178 file(s), 169 export path(s) resolve; @lablup/ui-common-cli 52 file(s), bin and imports resolve.
check:integration: @lablup/ui-common@0.2.0-alpha.20 validates with 0 errors, 0 warnings (72 docs type-checked)
[ok] @lablup/ui-common@0.2.0-alpha.20

@github-actions

github-actions Bot commented Oct 27, 2026 •

Copy link
Copy Markdown
Contributor

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR

GitHub Pages may take up to a minute to hydrate after the deploy.

🧩 Changed Components

Component Changed Stories Open
Board source 7 Storybook ↗

📦 Bundle Size

Group Gzip Δ Gzip vs base
components/Board 11.9 kB +0.1 kB

Total gzip (JS + CSS): 197.2 kB (+0.1 kB vs origin/main)


Generated by the PR Preview workflow for f36a9a2 · Storybook · CI run

@github-actions

github-actions Bot commented Oct 27, 2026 •

Copy link
Copy Markdown
Contributor

Preview published under the pr-103 dist-tag (npmjs): 0.2.0-alpha.20.pr-103-20261027071136-f36a9a259

pnpm add @lablup/ui-common@0.2.0-alpha.20.pr-103-20261027071136-f36a9a259
pnpm add -D @lablup/ui-common-cli@0.2.0-alpha.20.pr-103-20261027071136-f36a9a259

In backend.ai-webui: pnpm run ui-common:pin pr-103. A consumer PR pinned to a preview cannot merge; repin to canary after this PR merges.

@lablup-octodog

Copy link
Copy Markdown
Contributor Author

Ready-gate agent review (Opus) — blocking issues only

# File:line Finding Outcome
O1 src/components/Board/Board.test.tsx:451 "a press outside the activated handle commits the activation" passes without the new pointerdown listener: the test focuses the pressed button, so the handle's blur commits the activation and the case the fix is for — a press that leaves focus on the handle — has no test. Fixed in 6ab779b — added "a press that leaves focus on the handle still commits the activation" (press on an item heading, handle keeps focus); it fails on the parent commit's Board.tsx and passes with the fix.

The fix landed after this review and was not re-reviewed; pnpm run verify passes on 6ab779b.

@lablup-octodog
lablup-octodog marked this pull request as ready for review October 27, 2026 06:44
github-actions Bot added a commit that referenced this pull request Oct 27, 2026
A click on a move or resize handle without a drag activates it for arrow
keys and direction buttons. The activation ended only on Enter, Escape or
the handle's blur, and a press elsewhere inside the board did not always
blur the handle, so the item stayed active and kept reacting to the arrow
keys. While a keyboard activation is on, a capture-phase pointerdown on the
document now commits it unless the press lands on the active handle or its
direction buttons; focus stays where the press put it.
Add a Board test for a press that leaves focus on the activated handle: the existing test moves focus to the pressed button, so the handle's blur commits it and the test passed without the new pointerdown listener.
Rebased onto main. #68 dropped renderItem and the per-item remove button, so the outside-press test now presses a button placed in another item's description.
@lablup-octodog
lablup-octodog force-pushed the fix/gh-102-board-clicking-a-handle-leaves branch from 6ab779b to f36a9a2 Compare October 27, 2026 07:11
github-actions Bot added a commit that referenced this pull request Oct 27, 2026

@agatha197 agatha197 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

This branch was previously deployed

1 inactive deployment
release — f36a9a25 Deployed Oct 27, 2026 by lablup-octodog via npmjs #89
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

2 participants