Skip to content

feat: add blur and escape key callbacks to Toggle component#60

Merged
firestar300 merged 2 commits into
developfrom
feature/toggle-events
Jul 21, 2026
Merged

feat: add blur and escape key callbacks to Toggle component#60
firestar300 merged 2 commits into
developfrom
feature/toggle-events

Conversation

@firestar300

@firestar300 firestar300 commented Jul 21, 2026

Copy link
Copy Markdown
Collaborator

Introduces onBlur and onEscPressed callback options for the Toggle component, enabling custom logic when the toggle loses focus or the Escape key is pressed. This provides enhanced control and accessibility, and also refactors the existing onClick callback handling for consistency.


Note

Low Risk
Localized Toggle API extension and event-listener cleanup; behavior change is intentional (Escape no longer triggers click) and covered by tests.

Overview
Adds onBlur and onEscPressed options to Toggle, so consumers can run custom logic when focus leaves the control or when Escape is pressed while content is open. Blur/escape listeners are wired when those callbacks are set or when closeOnBlur / closeOnEscPress is enabled; closing on blur/escape is no longer tied to firing the new callbacks.

Escape handling is refactored: each instance uses a bound _handleEscPress on window (removed on destroy) instead of a global listener that simulated a button click. Escape now calls close() when closeOnEscPress is true and invokes onEscPressed without incrementing click side effects.

onClick is aligned with the same pattern (boundOnClick, “custom” detected vs default no-ops). Docs, the accessible-toggle example (event status UI), and Playwright coverage for click, blur, and escape are updated.

Reviewed by Cursor Bugbot for commit fb27d8e. Bugbot is set up for automated code reviews on this repo. Configure here.

Introduces `onBlur` and `onEscPressed` callback options for the Toggle component, enabling custom logic when the toggle loses focus or the Escape key is pressed. This provides enhanced control and accessibility, and also refactors the existing `onClick` callback handling for consistency.

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 57ec94d. Configure here.

Comment thread src/classes/Toggle.ts
When the 'closeOnEscPress' option was enabled, the Toggle component would use 'el.click()' to close itself via the Escape key. This had the unintended side effect of triggering the 'onClick' callback, which is intended for explicit user clicks, not programmatic closing via keyboard.

This commit replaces 'el.click()' with 'this.close()' in the 'onKeyDown' handler, ensuring that the 'onClick' callback is only fired for actual click events. The tests and example have been updated to confirm this separation of concerns and verify the click counter does not increment on Escape key press.
@firestar300
firestar300 merged commit eca32f8 into develop Jul 21, 2026
2 checks passed
@firestar300
firestar300 deleted the feature/toggle-events branch July 21, 2026 13:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant