UI: ScrollToTop may miss same-page anchor clicks on nested children #198

New Issue

Closed

opened 2026-05-29 16:45:56 -05:00 by null · 1 comment

null commented

2026-05-29 16:45:56 -05:00

Owner

Severity: Minor

Description: Same-page anchor navigation (#contact-form) is intercepted via click handler, but only catches direct anchor clicks. Clicks on nested children (icons, spans inside links) won't trigger it.

File: src/components/ScrollToTop.jsx

Fix direction: Use event delegation on nearest container or rely on React Router scroll restoration.

**Severity:** Minor **Description:** Same-page anchor navigation (`#contact-form`) is intercepted via click handler, but only catches direct anchor clicks. Clicks on nested children (icons, spans inside links) won't trigger it. **File:** `src/components/ScrollToTop.jsx` **Fix direction:** Use event delegation on nearest container or rely on React Router scroll restoration.

null added the

bug

labels 2026-05-29 16:45:56 -05:00

null added this to the Batch 11 — UI defects on narrow viewports milestone 2026-08-18 01:24:54 -05:00

null commented

2026-08-18 03:53:38 -05:00

Author

Owner

Not a defect — the code already does exactly what the fix direction asks for.

The claim is that the handler 'only catches direct anchor clicks. Clicks on nested children (icons, spans inside links) won't trigger it.'

src/components/ScrollToTop.jsx:23:

const anchor = e.target.closest('a')

Element.closest() walks up the DOM from the clicked element to the nearest matching ancestor. A click on an icon or a span inside a link has that <a> as an ancestor, so closest('a') finds it and the handler runs. Nested children already work.

The fix direction says 'use event delegation on nearest container'. Line 33 attaches the listener to document — that is event delegation, on the broadest container available, which is also why it keeps working for links added after mount.

This matters in practice for the hero CTAs, which are exactly the nested case: <Link to="/contact#contact-form">Schedule Consultation <ArrowRight/></Link>. Clicking the arrow icon resolves to the link through closest and scrolls correctly.

Closing as no change required.

Verify: read src/components/ScrollToTop.jsx lines 21-35 — the listener is on document and the target is resolved with e.target.closest('a'), which is the delegation the issue asks to be added.

Not a defect — the code already does exactly what the fix direction asks for. The claim is that the handler 'only catches direct anchor clicks. Clicks on nested children (icons, spans inside links) won't trigger it.' `src/components/ScrollToTop.jsx:23`: const anchor = e.target.closest('a') `Element.closest()` walks **up** the DOM from the clicked element to the nearest matching ancestor. A click on an icon or a span inside a link has that `<a>` as an ancestor, so `closest('a')` finds it and the handler runs. Nested children already work. The fix direction says 'use event delegation on nearest container'. Line 33 attaches the listener to `document` — that is event delegation, on the broadest container available, which is also why it keeps working for links added after mount. This matters in practice for the hero CTAs, which are exactly the nested case: `<Link to="/contact#contact-form">Schedule Consultation <ArrowRight/></Link>`. Clicking the arrow icon resolves to the link through `closest` and scrolls correctly. Closing as no change required. Verify: read `src/components/ScrollToTop.jsx` lines 21-35 — the listener is on `document` and the target is resolved with `e.target.closest('a')`, which is the delegation the issue asks to be added.

null closed this issue

2026-08-18 03:53:38 -05:00