Feed: clicking into the inline comment textarea navigates away to the note view #34

Closed
opened 2026-07-10 09:51:28 +00:00 by laoc · 1 comment
Owner

Bug

In the feed, clicking the comment icon on a note card correctly opens the inline comment section. But clicking into the comment textarea navigates to the note detail view instead of focusing the input, so you can't write your comment in the feed.

Cause (confirmed in code)

src/lib/components/notes/NoteCard.svelte:

  • The whole card is role="button" with onclick={handleCardClick}goto(neventHref).
  • handleCardClick only bails when e.target.closest('button, a') matches.
  • The action toolbar row stops propagation, but the inline comment section ({#if showComments}CommentListCommentInput with a <textarea>) does not. A <textarea> is neither a button nor an anchor, so the click bubbles to the card and triggers navigation.

Fix

Stop propagation on the comment section wrapper (like the toolbar row does) and/or broaden the closest() guard to include textarea, input, form, [contenteditable].

Acceptance criteria

  • Clicking the comment icon opens the inline comment section (unchanged).
  • Clicking into the comment textarea focuses it; no navigation happens.
  • Clicking elsewhere on the card still navigates to the note view.
  • Component test covering the textarea-click case.
## Bug In the feed, clicking the comment icon on a note card correctly opens the inline comment section. But clicking into the comment **textarea** navigates to the note detail view instead of focusing the input, so you can't write your comment in the feed. ## Cause (confirmed in code) `src/lib/components/notes/NoteCard.svelte`: - The whole card is `role="button"` with `onclick={handleCardClick}` → `goto(neventHref)`. - `handleCardClick` only bails when `e.target.closest('button, a')` matches. - The action toolbar row stops propagation, but the inline comment section (`{#if showComments}` → `CommentList` → `CommentInput` with a `<textarea>`) does **not**. A `<textarea>` is neither a button nor an anchor, so the click bubbles to the card and triggers navigation. ## Fix Stop propagation on the comment section wrapper (like the toolbar row does) and/or broaden the `closest()` guard to include `textarea, input, form, [contenteditable]`. ## Acceptance criteria - Clicking the comment icon opens the inline comment section (unchanged). - Clicking into the comment textarea focuses it; no navigation happens. - Clicking elsewhere on the card still navigates to the note view. - Component test covering the textarea-click case.
Author
Owner

Fixed on branch feat/feed-issues-34-37 (commit 2f31d06d). The card click/keydown handlers now ignore interactive targets (textarea, input, contenteditable, and the whole comment section) — also fixes Space/Enter while typing a comment triggering navigation. Verified in the browser: clicking into the expanded comment section no longer navigates; card body click still does. Component tests added.

Fixed on branch [`feat/feed-issues-34-37`](https://git.edufeed.org/edufeed/edufeed-app/src/branch/feat/feed-issues-34-37) (commit 2f31d06d). The card click/keydown handlers now ignore interactive targets (textarea, input, contenteditable, and the whole comment section) — also fixes Space/Enter while typing a comment triggering navigation. Verified in the browser: clicking into the expanded comment section no longer navigates; card body click still does. Component tests added.
laoc closed this issue 2026-07-14 13:26:02 +00:00
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
edufeed/edufeed-app#34
No description provided.