Link click handling breaks the <Router> isolation/context principle
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 45/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- typescript
Research direction
Reproduce the issue in the linked CodeSandbox with two Router instances, then inspect the A component's document-level click handling and the Router context/integration path. Confirm that clicks under each Router invoke that Router's integration setter, and verify the behavior against the listed reproduction steps.
Written by the indexing model from the issue text.
Description
Describe the bug
I'm making the assumption here that this package supports multiple routers running at the same time as it does use context for isolation instead of some kind of global store. Described bug is not an issue if my assumption is wrong.
Router component provides context which isolates and enforces the scope of router functionality.
For example useLocation under <Router> returns the location for that particular router.
Link click handling (A component) breaks that principle and functionality because link click event handler is added to document and if you have multiple routers (with default integration or custom), only one integration setter will be always called.
I propose to handle it in some sort of scoped way, for example:
<Router scopeEl={htmlElementRef} source={integration}> and
const target = args.scopeEl || document;
target .addEventListener("click", handleAnchorClick);
Or a bit more advanced (and potentially buggy): automatically find the nearest parent HTML element for <Router>.
Your Example Website or App
https://codesandbox.io/s/solid-app-router-example-forked-25ysls?file=/Index.js
Steps to Reproduce the Bug or Issue
- Go to Home (
/) if not already there and open console - Click on any of the "Post X (modal)" links
- Clear console log
- Click on any of the "Post X (modal)" links in modal (links under router 2)
You can see in logs [router 1] set global loc: that even though this link is rendered under second <Router>, it will still invoke the setter for first <Router> integration.
Expected behavior
Link behaviour respects the context.
Link rendered under <Router1 source={integration1}> should invoke the integration1 setter.
Link rendered under <Router2 source={integration2}> should invoke the integration2 setter.
Screenshots or Videos
No response
Platform
- OS: any
- Browser: any
- Version: 0.8.3
Additional context
No response
- Dominant language
- TypeScript
- Stars
- 1.3k
- Forks
- 180
- Avg merge
- 1d 10h
- Merged PRs (30d)
- 19
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from solidjs/solid-router
-
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
solidjs/solid-router#605 · 1 comment ·
-
Difficulty 3/5 1-2 days Newbie friendliness 65/100
solidjs/solid-router#615 ·
-
Difficulty 3/5 1-2 days Newbie friendliness 78/100
solidjs/solid-router#603 · 1 comment ·
-
<A> costs ~6us of server CPU per instance during SSR (20x a plain <a>), mostly mergeProps/splitProps Open
Difficulty 4/5 3-5 days Newbie friendliness 55/100
solidjs/solid-router#583 ·
-
enhancement
Difficulty 5/5 Over a week Newbie friendliness 35/100
solidjs/solid-router#569 · 3 comments ·
All issues in solidjs/solid-router
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
bcgov/bc-wallet-mobile#4761 · 1 comment ·
-
external-issue to-triage
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
-
area-deployment area-integrations triage:bot-seen
Difficulty 2/5 Half a day Newbie friendliness 86/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
-
refactor
Difficulty 2/5 1-3 hours Newbie friendliness 84/100