mirror of
https://github.com/we-promise/sure.git
synced 2026-09-09 00:24:15 +00:00
fix(ui): make whole list row clickable, not just the name text (#3367)
* fix(ui): make whole list row clickable, not just the name text Fixes #3366. Transaction, split-parent, trade, and account list rows carry hover styling that implies the whole row is clickable, but only the name text actually opened the detail drawer — clicking the avatar, amount, or whitespace between them did nothing. Add a clickable-row Stimulus controller that delegates a click anywhere on the row to its primary link, while leaving real interactive descendants (checkbox, category menu, account link, quick-edit badge, kebab menu) to handle their own clicks. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> * fix(ui): exclude popover/menu panels from row click delegation, preserve modifier clicks Codex review on #3367 flagged two issues in clickable_row_controller: - Category/account popovers render as position:fixed but stay DOM descendants of the row, so clicking their background (padding, headings, plain text) fell through to the row's link. - linkTarget.click() discarded Ctrl/Cmd/Shift modifiers, so modified clicks opened in the current frame instead of a new tab. * fix(ui): exclude quick-edit dropdown, use window.open for modified clicks CodeRabbit review on #3367 found two more issues: - The investment activity quick-edit dropdown is a hand-rolled absolute-positioned panel (not DS::Popover/DS::Menu), so it wasn't covered by the earlier popover/menu exclusion and background clicks inside it fell through to the row link. - Redispatching a synthetic MouseEvent with modifier flags doesn't actually open a new tab: browsers only honor Ctrl/Cmd/Shift on trusted, native click events, so the previous "fix" was cosmetic. Explicitly call window.open() for modified clicks instead. * fix(ui): make Dividend/Interest quick-edit badge not swallow row clicks jjmata found that the activity-label badge renders as a real <button> even when Dividend/Interest trades have no dropdown/click handler (income_trade), so clickable-row's "a, button, ..." exclusion still treats it as an interactive descendant and swallows the click instead of opening the row — same dead-spot symptom as #3366, relocated to this one badge. Render it as a <span> in that case so the row click delegates normally. * fix(ui): show pointer cursor on delegated Dividend/Interest badge CodeRabbit caught that the badge kept cursor-default after becoming a non-interactive <span> that delegates its click to the row link — the cursor no longer matched the actual (now clickable) behavior. --------- Co-authored-by: GFR <248542187+gfr-free@users.noreply.github.com> Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
GFR
Claude Sonnet 5
parent
bca1239848
commit
ab175cc43c
@@ -0,0 +1,38 @@
|
||||
import { Controller } from "@hotwired/stimulus";
|
||||
|
||||
// Delegates a click anywhere on a list row (avatar, whitespace, cells with
|
||||
// no control of their own) to the row's primary link, so the whole row
|
||||
// looks and behaves as clickable rather than only the exact link text.
|
||||
// Clicks on real interactive descendants (checkbox, category menu, account
|
||||
// link, kebab menu, etc.) are left alone so they keep handling themselves.
|
||||
export default class extends Controller {
|
||||
static targets = ["link"];
|
||||
|
||||
open(event) {
|
||||
if (event.target.closest("a, button, input, select, textarea, label")) return;
|
||||
// Popover/menu/dropdown panels (category dropdown, account/kebab menu,
|
||||
// investment activity quick-edit) render as `position: fixed`/`absolute`
|
||||
// but stay DOM descendants of the row, so a click anywhere on their
|
||||
// background (padding, headings, plain text) would otherwise fall
|
||||
// through to the row's own link.
|
||||
if (
|
||||
event.target.closest(
|
||||
'[data-ds--popover-target="content"], [data-ds--menu-target="content"], [data-activity-label-quick-edit-target="dropdown"]',
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
if (window.getSelection().toString().length > 0) return;
|
||||
|
||||
// Browsers only honor Ctrl/Cmd/Shift (open in new tab/window) on
|
||||
// trusted, native link activation — a synthetic/dispatched click event
|
||||
// is always untrusted, so its modifier-key flags are ignored. Open the
|
||||
// link explicitly instead of delegating to `linkTarget.click()`.
|
||||
if (event.ctrlKey || event.metaKey || event.shiftKey) {
|
||||
window.open(this.linkTarget.href, "_blank", "noopener");
|
||||
return;
|
||||
}
|
||||
|
||||
this.linkTarget.click();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user