Skip to content

Improve back button behavior#26427

Merged
rijkvanzanten merged 14 commits intomainfrom
rijk/nav-back-button-2
Dec 24, 2025
Merged

Improve back button behavior#26427
rijkvanzanten merged 14 commits intomainfrom
rijk/nav-back-button-2

Conversation

@rijkvanzanten
Copy link
Member

@rijkvanzanten rijkvanzanten commented Dec 24, 2025

Scope

As called out in #26369, the browser-history-back behavior of the back button doesn't always behave like the user would expect. This PR continues on the work in #26399 to:

  • Add support for a back-to prop on private-view
  • Make sure only one thing ever renders in the title prepend slot
  • Add back-to routes for nested pages (eg /flows/:id/flows)

Potential Risks / Drawbacks

  • The logic to ensure only one item renders in the prepend slot might cause some unintended side effects for extensions

Tested Scenarios

  • Briefly checked the back button behavior across the app

Review Notes / Questions

  • Fairly straightforward change this, should be easy to review

Checklist

  • Added or updated tests
  • Documentation PR created here or not required
  • OpenAPI package PR created here or not required

Fixes #26369, supersedes and closes #26399

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR improves the back button behavior in the Directus admin interface by introducing a back-to prop that allows explicit navigation targets instead of relying solely on browser history. The key improvement ensures only one element (back button, icon, or slot content) renders in the title prepend area, preventing potential layout conflicts.

  • Adds back-to prop to PrivateView component for explicit back navigation targets
  • Refactors header bar rendering logic to ensure mutual exclusivity between back button, custom icon, and title-outer:prepend slot
  • Applies back-to prop across 12 nested route pages to provide predictable navigation paths

Reviewed changes

Copilot reviewed 21 out of 21 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
contributors.yml Adds new contributor kekekuli to the contributors list
app/src/views/private/private-view/components/private-view.vue Adds optional backTo prop definition with documentation
app/src/views/private/private-view/components/private-view-main.vue Passes back-to prop through to header bar component
app/src/views/private/private-view/components/private-view-header-bar.vue Implements priority-based rendering logic (showBack > icon > slot) and reorders imports for consistency
app/src/views/private/private-view/components/private-view-header-bar-icon.vue Updates back button to support conditional navigation via backTo prop or browser history
app/src/views/private/private-view/components/private-view-header-bar.test.ts Adds comprehensive test coverage for header bar component behavior
app/src/views/private/private-view/components/private-view-header-bar-icon.test.ts Adds comprehensive test coverage for icon component including back button behaviors
app/src/modules/users/routes/item.vue Adds back-to="/users" prop for predictable navigation
app/src/modules/settings/routes/webhooks/item.vue Adds back-to="/settings/webhooks" prop for predictable navigation
app/src/modules/settings/routes/translations/item.vue Adds back-to="/settings/translations" prop for predictable navigation
app/src/modules/settings/routes/roles/public-item.vue Adds back-to="/settings/roles" prop for predictable navigation
app/src/modules/settings/routes/roles/item.vue Adds back-to="/settings/roles" prop for predictable navigation
app/src/modules/settings/routes/presets/item.vue Adds back-to="/settings/presets" prop for predictable navigation
app/src/modules/settings/routes/policies/item.vue Adds back-to="/settings/policies" prop for predictable navigation
app/src/modules/settings/routes/marketplace/routes/extension/extension.vue Adds back-to="/settings/marketplace" prop for predictable navigation
app/src/modules/settings/routes/marketplace/routes/account/account.vue Adds back-to="/settings/marketplace" prop for predictable navigation
app/src/modules/settings/routes/flows/flow.vue Adds back-to="/settings/flows" prop for predictable navigation
app/src/modules/settings/routes/data-model/fields/fields.vue Adds back-to="/settings/data-model" prop and custom title-outer:prepend slot with back button (creates redundancy)
app/src/modules/files/routes/item.vue Adds back-to="/files" prop and consolidates imports for better organization
app/src/modules/content/routes/item.vue Adds dynamic back-to using collectionRoute for collection-specific navigation
.changeset/breezy-moons-warn.md Documents the change as a patch version bump for @directus/app

@rijkvanzanten
Copy link
Member Author

@copilot open a new pull request to apply changes based on the comments in this thread

This comment was marked as resolved.

rijkvanzanten and others added 3 commits December 24, 2025 10:47
* Initial plan

* Remove redundant custom back button from fields.vue

Co-authored-by: rijkvanzanten <[email protected]>

* Add test to verify router.back() is not called when backTo is provided

Co-authored-by: rijkvanzanten <[email protected]>

* Add tests to verify mutual exclusivity of header bar elements

Co-authored-by: rijkvanzanten <[email protected]>

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: rijkvanzanten <[email protected]>
Co-authored-by: Rijk van Zanten <[email protected]>
@rijkvanzanten rijkvanzanten merged commit ba8c9da into main Dec 24, 2025
73 checks passed
@rijkvanzanten rijkvanzanten deleted the rijk/nav-back-button-2 branch December 24, 2025 16:25
@github-actions github-actions bot added this to the Next Release milestone Dec 24, 2025
@kekekuli
Copy link
Contributor

Cool! Thank you for your review

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Feb 23, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Back button doesn't behave normally

4 participants