Skip to content

UX: Disable Add Comment toolbar button when no text is selected#401

Draft
Copilot wants to merge 6 commits into
mainfrom
copilot/ux-add-disabled-button
Draft

UX: Disable Add Comment toolbar button when no text is selected#401
Copilot wants to merge 6 commits into
mainfrom
copilot/ux-add-disabled-button

Conversation

Copy link
Copy Markdown

Copilot AI commented May 13, 2026

The "Add Comment" toolbar button was always enabled regardless of editor selection state, requiring a toast notification to communicate that no text was selected rather than preventing the action up front.

Changes

  • Disabled state on loadpostAceInit calls updateAddCommentButtonState(false) after plugin init so the button starts disabled
  • Reactive to selectionaceEditEvent hook calls updateAddCommentButtonState(!checkNoTextSelected(rep)) on every selection change, enabling/disabling the button in real time
  • Click guard — the .addComment click handler bails out early if the button is disabled (belt-and-suspenders alongside the CSS)
  • Cached DOM refsthis.$addCommentBtn and this.$addCommentBtnLink are cached once in init() to avoid repeated lookups on the hot aceEditEvent path
  • CSS.addComment.disabled applies opacity: 0.4 + cursor: not-allowed; .addComment.disabled > a sets pointer-events: none to block clicks on the anchor without breaking Playwright's ability to interact with the <li>
  • TestsclickAddCommentButton helper now polls for enabled state before clicking; five new Playwright specs cover: initial disabled state, enabled on selection, re-disabled on deselection, click-while-disabled does not open form, click-while-enabled opens form
// New method on EpComments.prototype
EpComments.prototype.updateAddCommentButtonState = function (hasSelection) {
  const $btn = this.$addCommentBtn;
  const $a = this.$addCommentBtnLink;
  if (!$btn) return;
  if (hasSelection) {
    $btn.removeClass('disabled');
    $a.removeAttr('aria-disabled');
  } else {
    $btn.addClass('disabled');
    $a.attr('aria-disabled', 'true');
  }
};

Copilot AI linked an issue May 13, 2026 that may be closed by this pull request
Copilot AI and others added 5 commits May 13, 2026 10:38
- Add `updateAddCommentButtonState(hasSelection)` to EpComments prototype
- Call it in `postAceInit` (initial disabled state) and `aceEditEvent` (on every selection change)
- Guard the `.addComment` click handler to bail out when disabled
- Add `.addComment.disabled` CSS: opacity + cursor + pointer-events on child <a>
- Update `clickAddCommentButton` test helper to wait for enabled state
- Add five new Playwright tests covering disabled/enabled button behaviour

Agent-Logs-Url: https://github.com/ether/ep_comments_page/sessions/05bd6554-0537-4892-b608-28221070422f

Co-authored-by: JohnMcLear <220864+JohnMcLear@users.noreply.github.com>
… lookups in aceEditEvent

Agent-Logs-Url: https://github.com/ether/ep_comments_page/sessions/05bd6554-0537-4892-b608-28221070422f

Co-authored-by: JohnMcLear <220864+JohnMcLear@users.noreply.github.com>
Copilot AI changed the title [WIP] Add disabled state to toolbar button when no text is selected UX: Disable Add Comment toolbar button when no text is selected May 13, 2026
Copilot AI requested a review from JohnMcLear May 13, 2026 10:45
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.

UX: Add disabled button

2 participants