Blazor: Anchor Tree Item triggers full page navigation (doesn't support 'enhanced navigation')
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 39
- Forks
- 14
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 13
Description
🐛 Bug Report
When using NimbleAnchorTreeItem in a NimbleTreeView in a Blazor project, enhanced navigation (same-document navigation without a full navigate/ page reload) will not work. (NimbleAnchorTreeItem will always trigger a full navigate/ page reload, when activated.)
💻 Repro or Code Sample
See test project above. The Nimble Tree is at the top of the left pane, and navigating with that will trigger reloads (you'll see the nav pane flicker/refresh), whereas using the anchors/links further down will not reload.
🤔 Expected Behavior
NimbleAnchorTreeItem should support enhanced navigation (without full reload). Other controls like NimbleAnchor / NimbleAnchorButton do support that scenario already.
😯 Current Behavior
NimbleAnchorTreeItem triggers a full navigation/reload.
Workaround
Currently, if someone requires a Nimble tree + enhanced navigation, they can use NimbleTreeItem with registered onclick / onkeydown (for Enter key) handlers, which use the Blazor NavigationManager.NavigateTo() API to navigate.
Additional discussion
Blazor has page-level click interception logic to support enhanced navigation. See NavigationUtils in ASP.NET Core source, which no-ops if the click event had preventDefault() called. There's also EventDelegator.dispatchGlobalEventToAllElements which will stop going up the chain looking for an event target if stopPropagation happened.
The Nimble AnchorTreeItem clickHandler does stopPropagation, so that seems to cause the problem.
(To confirm, in DevTools if you unhook that event handler from the tree item at runtime, you do get the enhanced navigation behavior.)
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.
Research direction
Start in packages/nimble-components/src/anchor-tree-item/index.ts at the AnchorTreeItem clickHandler, then reproduce the behavior with BlazorAnchorTreeItemDemo.zip. Check how stopPropagation affects Blazor enhanced navigation and compare with NimbleAnchor and NimbleAnchorButton. Done means activating a NimbleAnchorTreeItem navigates without a full page reload.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 72/100