Skip to content

Support canceling progress when event.preventDefault() is used #173

@programming-with-ia

Description

@programming-with-ia

Feature Description

Currently, bprogress attaches click listeners using the capture phase. This means the progress bar starts immediately when a link is clicked, before the React onClick handler has a chance to run.

If I call e.preventDefault() inside my Link's onClick handler to stop navigation (e.g., because a form is invalid or a condition isn't met), the navigation stops, but the progress bar still starts and simulates loading.

I propose that bprogress should detect if event.defaultPrevented is true (perhaps by checking slightly later in the event loop) and automatically cancel or not start the progress bar.

Use Cases

  1. Conditional Navigation: preventing a user from visiting a checkout page if their cart is empty.
  2. Form Validation: using a Link to submit data, but blocking it if required fields are missing.
  3. Confirmation Dialogs: clicking a link opens a "Are you sure you want to leave?" modal instead of navigating immediately.

Package

@bprogress/next/app

Additional context

Currently, I have to manually toggle the data-prevent-progress attribute to handle this, which is verbose. It would be much better Developer Experience (DX) if the library automatically respected standard DOM event cancellation.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions