ni / ni/nimble

Blazor: Anchor Tree Item triggers full page navigation (doesn't support 'enhanced navigation')

Open
#2,908 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
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

BlazorAnchorTreeItemDemo.zip

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.