fix(BNavBar): update auto-close behavior #2789

dwgray · 2025-07-27T20:50:08Z

Describe the PR

We've implemented inside and outside values for auto-close on BDropdown. Since BNavItemDropdown is a thin wrapper on BDropdown we should be consistent and implement those values on BNaviItemDropdown as well.

Change the prop on BNavBar to auto-close-dropdowns
Add a auto-close-dropdowns to BNav
Use the existing inject mechanism to fall back to the prop set on the Nav[Bar]
Remove the tag field form the injection key, as it wasn't used
Fix up some types
Update the docs

Addresses issues raised by #2778 (but doesn't fix it as the direct ask in that bug is unplanned)

Small replication

See the examples in docx

PR checklist

What kind of change does this PR introduce? (check at least one)

The PR fulfills these requirements:

Pull request title and all commits follow the Conventional Commits convention or has an override in this pull request body This is very important, as the CHANGELOG is generated from these messages, and determines the next version type. Pull requests that do not follow conventional commits or do not have an override will be denied

Summary by CodeRabbit

New Features
- Added support for customizing dropdown auto-close behavior in navigation and navbar components using the new autoCloseDropdowns property and noAutoClose flag.
- Introduced new interactive demo components demonstrating various dropdown auto-close configurations.
- Standardized dropdown auto-close options with a new type supporting true, false, "inside", and "outside" values.
Documentation
- Expanded and clarified documentation for dropdown auto-close behavior in navigation and navbar components, including new sections and demo snippets.
- Added type definitions and usage examples for the new auto-close options.
Refactor
- Unified and renamed internal injection keys and properties related to dropdown auto-close behavior for consistency across components.
- Updated component props and internal logic to support the new auto-close configuration model.

… back to the containng NavBar

…-close

bolt-new-by-stackblitz · 2025-07-27T20:50:10Z

Run & review this pull request in StackBlitz Codeflow.

coderabbitai · 2025-07-27T20:50:14Z

Walkthrough

This change introduces a new prop, autoCloseDropdowns, to the BNav and BNavbar components, standardizes its type using a new AutoCloseOptions alias, and updates dependency injection keys and documentation accordingly. New Vue demo components and documentation sections illustrate and explain dropdown auto-close behaviors and configuration options.

Changes

Cohort / File(s)	Change Summary
Nav & Navbar Prop Standardization `apps/docs/src/data/components/nav.data.ts`, `apps/docs/src/data/components/navbar.data.ts`, `apps/docs/src/utils/common-props.ts`, `packages/bootstrap-vue-next/src/components/BNav/BNav.vue`, `packages/bootstrap-vue-next/src/components/BNavbar/BNavbar.vue`, `packages/bootstrap-vue-next/src/types/ComponentProps.ts`	Introduced and standardized the `autoCloseDropdowns` prop for `BNav` and `BNavbar`, updated prop typing to use `AutoCloseOptions`, and adjusted property selection logic.
Dropdown Auto-Close Inheritance & Logic `packages/bootstrap-vue-next/src/components/BNav/BNavItemDropdown.vue`	Modified dropdowns to inherit `autoClose` from parent nav context via injection, allowing local override.
Injection Key Refactor `packages/bootstrap-vue-next/src/utils/keys.ts`, `packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItem.vue`, `packages/bootstrap-vue-next/src/components/BLink/BLink.vue`	Renamed `navbarInjectionKey` to `navInjectionKey`, updated its type, and replaced all usages accordingly.
Type Definitions `packages/bootstrap-vue-next/src/types/AutoCloseOptions.ts`, `packages/bootstrap-vue-next/src/types/index.ts`, `apps/docs/src/docs/types.md`	Added and exported `AutoCloseOptions` type alias (`boolean
Documentation Updates `apps/docs/src/docs/components/nav.md`, `apps/docs/src/docs/components/navbar.md`	Added and revised sections explaining dropdown auto-close behavior, configuration options, and inheritance/override mechanics.
Demo Components `apps/docs/src/docs/components/demo/NavAutoClose.vue`, `apps/docs/src/docs/components/demo/NavbarAutoClose.vue`, `apps/docs/src/docs/components/demo/NavbarNoAutoClose.vue`	Added new Vue demo components visually demonstrating different `autoCloseDropdowns` settings for nav and navbar dropdowns, including a no-auto-close navbar example.
Miscellaneous Demo Fixes `apps/docs/src/docs/components/demo/NavbarItemDropdown.vue`, `apps/docs/src/docs/components/demo/NavbarToggle.vue`	Updated href attributes on nav and dropdown items to specific anchors for better demo behavior.
App.vue Template Overhaul `packages/bootstrap-vue-next/src/App.vue`	Replaced simple "Hello World" template with a complex dark-themed navbar layout demonstrating navigation, dropdowns, and search form.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant BNavbar
    participant BNav
    participant BNavItemDropdown

    User->>BNavbar: Set autoCloseDropdowns prop
    BNavbar->>BNavItemDropdown: Provide autoClose via navInjectionKey

    User->>BNav: Set autoCloseDropdowns prop
    BNav->>BNavItemDropdown: Provide autoClose via navInjectionKey

    BNavItemDropdown->>BNavItemDropdown: Use own autoClose prop if set
    BNavItemDropdown->>BNavItemDropdown: Otherwise, use injected autoClose

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~18 minutes

Suggested reviewers

xvaara
VividLemon

Poem

🐇
Dropdowns now close just as you choose,
Inside, outside, or not at all—
Docs and demos show the news,
With types and keys that now enthrall.
Navs and bars, in harmony,
Hop along with clarity!

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3023adb and 9330cbf.

📒 Files selected for processing (13)

apps/docs/src/data/components/navbar.data.ts (2 hunks)
apps/docs/src/docs/components/demo/NavbarItemDropdown.vue (1 hunks)
apps/docs/src/docs/components/demo/NavbarNoAutoClose.vue (1 hunks)
apps/docs/src/docs/components/demo/NavbarToggle.vue (1 hunks)
apps/docs/src/docs/components/navbar.md (1 hunks)
packages/bootstrap-vue-next/src/App.vue (1 hunks)
packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItem.vue (2 hunks)
packages/bootstrap-vue-next/src/components/BLink/BLink.vue (3 hunks)
packages/bootstrap-vue-next/src/components/BNav/BNav.vue (2 hunks)
packages/bootstrap-vue-next/src/components/BNav/BNavItemDropdown.vue (2 hunks)
packages/bootstrap-vue-next/src/components/BNavbar/BNavbar.vue (2 hunks)
packages/bootstrap-vue-next/src/types/ComponentProps.ts (4 hunks)
packages/bootstrap-vue-next/src/utils/keys.ts (2 hunks)

✅ Files skipped from review due to trivial changes (4)

apps/docs/src/docs/components/demo/NavbarToggle.vue
apps/docs/src/docs/components/demo/NavbarItemDropdown.vue
packages/bootstrap-vue-next/src/App.vue
apps/docs/src/docs/components/demo/NavbarNoAutoClose.vue

🚧 Files skipped from review as they are similar to previous changes (9)

packages/bootstrap-vue-next/src/components/BLink/BLink.vue
apps/docs/src/data/components/navbar.data.ts
apps/docs/src/docs/components/navbar.md
packages/bootstrap-vue-next/src/utils/keys.ts
packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItem.vue
packages/bootstrap-vue-next/src/components/BNav/BNavItemDropdown.vue
packages/bootstrap-vue-next/src/components/BNav/BNav.vue
packages/bootstrap-vue-next/src/components/BNavbar/BNavbar.vue
packages/bootstrap-vue-next/src/types/ComponentProps.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: build

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai generate unit tests to generate unit tests for this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

pkg-pr-new · 2025-07-27T20:52:40Z

bsvn-vite-ts

npm i https://pkg.pr.new/bootstrap-vue-next/bootstrap-vue-next@2789

npm i https://pkg.pr.new/bootstrap-vue-next/bootstrap-vue-next/@bootstrap-vue-next/nuxt@2789

commit: 9330cbf

xvaara · 2025-07-29T11:06:46Z

I'm just copy-pasting this here:
I think the problem is that in common-props.ts the description is Controls the automatic closing of the component when clicking. See above for details. and BNavbar is toggle-able, so the end user (like in this case the OP) is expecting the auto-close to mean the navbar, not the potential dropdowns inside it. So maybe we should rename it auto-close-dropdown?

coderabbitai

Actionable comments posted: 1

🔭 Outside diff range comments (2)

packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItem.vue (1)

100-106: Potentially incomplete handling of 'inside' | 'outside' options
Like in BLink.vue, the click handler collapses the navbar only when autoClose === true. If 'inside' should also collapse on an item click (which occurs inside), extend the predicate accordingly to avoid a behavioural regression.
apps/docs/src/docs/components/navbar.md (1)
121-121: Fix typo in the description.

There's a typo: "Navr" should be "Nav".
-By default, dropdowns contained in the `Navr` are closed when clicking inside or outside the dropdown menu. You can use the `auto-close-dropdowns` property to change this behavior of the dropdowns.
+By default, dropdowns contained in the `Nav` are closed when clicking inside or outside the dropdown menu. You can use the `auto-close-dropdowns` property to change this behavior of the dropdowns.

🧹 Nitpick comments (4)

packages/bootstrap-vue-next/src/types/AutoCloseOptions.ts (1)
1-2: Consider adding a brief JSDoc describing semantics
A one-liner helps consumers understand how the three variants differ.
-export type AutoCloseOptions = boolean | 'inside' | 'outside'
+/**
+ * Controls automatic closing behaviour.
+ * `true`   – always close
+ * `false`  – never close
+ * `'inside'`  – close when the click originated from *inside* the component
+ * `'outside'` – close when the click originated from *outside* the component
+ */
+export type AutoCloseOptions = boolean | 'inside' | 'outside'
apps/docs/src/docs/components/navbar.md (1)
162-169: Excellent explanatory note with minor style suggestion.

The note clearly explains the inheritance behavior and precedence rules, which will help users understand how the auto-close settings interact between parent and child components.

Consider the style improvement suggested by static analysis:
-Setting the `auto-close-dropdown` prop on the `BNavBar` will change the close behavior for all of the `BNavItemDropdown`
+Setting the `auto-close-dropdown` prop on the `BNavBar` will change the close behavior for all `BNavItemDropdown`
apps/docs/src/docs/components/nav.md (1)
132-139: Good explanatory note with minor style suggestion.

The note effectively explains the inheritance behavior. Same style improvement suggestion as in navbar.md:
-Setting the `auto-close-dropdown` prop on the `BNavBar` will change the close behavior for all of the `BNavItemDropdown`
+Setting the `auto-close-dropdown` prop on the `BNavBar` will change the close behavior for all `BNavItemDropdown`
apps/docs/src/docs/components/demo/NavbarAutoClose.vue (1)
1-67: Well-structured demo component with clear examples.

The component effectively demonstrates the different auto-close-dropdowns behaviors with consistent styling and layout. The examples cover all the key scenarios: default, "inside", "outside", and disabled auto-close.

Minor suggestion for improved clarity:

Consider updating the dropdown text descriptions to be more explicit about the behavior:
-          text="Clickable outside (auto-close-dropdowns=inside)"
+          text="Closes when clicking inside (auto-close-dropdowns=inside)"
-          text="Clickable inside (auto-close-dropdowns=outside)"  
+          text="Closes when clicking outside (auto-close-dropdowns=outside)"

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between fc3e71a and 619d00c.

📒 Files selected for processing (17)

apps/docs/src/data/components/nav.data.ts (1 hunks)
apps/docs/src/data/components/navbar.data.ts (1 hunks)
apps/docs/src/docs/components/demo/NavAutoClose.vue (1 hunks)
apps/docs/src/docs/components/demo/NavbarAutoClose.vue (1 hunks)
apps/docs/src/docs/components/nav.md (1 hunks)
apps/docs/src/docs/components/navbar.md (1 hunks)
apps/docs/src/docs/types.md (1 hunks)
apps/docs/src/utils/common-props.ts (1 hunks)
packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItem.vue (2 hunks)
packages/bootstrap-vue-next/src/components/BLink/BLink.vue (2 hunks)
packages/bootstrap-vue-next/src/components/BNav/BNav.vue (2 hunks)
packages/bootstrap-vue-next/src/components/BNav/BNavItemDropdown.vue (2 hunks)
packages/bootstrap-vue-next/src/components/BNavbar/BNavbar.vue (2 hunks)
packages/bootstrap-vue-next/src/types/AutoCloseOptions.ts (1 hunks)
packages/bootstrap-vue-next/src/types/ComponentProps.ts (4 hunks)
packages/bootstrap-vue-next/src/types/index.ts (1 hunks)
packages/bootstrap-vue-next/src/utils/keys.ts (2 hunks)

🧰 Additional context used

🧠 Learnings (16)

📓 Common learnings

Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2425
File: packages/bootstrap-vue-next/src/plugins/popoverController/index.ts:138-140
Timestamp: 2025-04-28T22:48:46.738Z
Learning: In bootstrap-vue-next, `PopoverOrchestratorParam` includes an `id` field of type `ControllerKey` through inheritance from base types. This field is declared in the `BvControllerOptions` interface and propagated through the type hierarchy.

Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:630-632
Timestamp: 2025-05-23T23:58:07.165Z
Learning: The `<NotYetImplemented/>` component in the bootstrap-vue-next documentation automatically renders text indicating "Not Yet Implemented", so additional explanatory text about features not being implemented is redundant when this component is used.

packages/bootstrap-vue-next/src/components/BLink/BLink.vue (10)

Learnt from: VividLemon
PR: #2691
File: packages/bootstrap-vue-next/src/composables/useBLinkHelper.ts:85-86
Timestamp: 2025-05-26T17:28:35.902Z
Learning: In the useBLinkTagResolver function in packages/bootstrap-vue-next/src/composables/useBLinkHelper.ts, the routerComponentName parameter is required and typed as MaybeRefOrGetter<string>, ensuring it cannot be undefined.

Learnt from: xvaara
PR: #2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:384-404
Timestamp: 2025-05-28T07:57:19.915Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the activeIndex and activeId watchers are intentionally designed with separation of concerns: activeIndex watcher handles activate-tab event emission and complex validation logic, while activeId watcher is kept simple for synchronization between activeId and activeIndex values only.

Learnt from: dwgray
PR: #2679
File: apps/docs/.vitepress/theme/Layout.vue:0-0
Timestamp: 2025-05-01T23:40:56.146Z
Learning: In bootstrap-vue-next, the useScrollspy hook returns an object with a current property which is the ID string (or null) of the currently active item, not an object containing an ID.

Learnt from: xvaara
PR: #2425
File: packages/bootstrap-vue-next/src/plugins/popoverController/index.ts:138-140
Timestamp: 2025-04-28T22:48:46.738Z
Learning: In bootstrap-vue-next, PopoverOrchestratorParam includes an id field of type ControllerKey through inheritance from base types. This field is declared in the BvControllerOptions interface and propagated through the type hierarchy.

Learnt from: xvaara
PR: #2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:425-430
Timestamp: 2025-05-28T07:32:45.658Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the activeIndex synchronization within sortTabs() is necessary and correct. When sorting tabs by DOM position, indices change, so activeIndex must be updated immediately to maintain consistency with activeId. This is not an unwanted side effect but a required consequence of the sorting operation.

Learnt from: xvaara
PR: #2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:240-261
Timestamp: 2025-05-28T07:01:55.095Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the complex initialization logic with updateInitialActiveIndex and updateInitialActiveId flags is necessary for SSR compatibility. Tab initialization cannot be deferred to mounted lifecycle because tabs must be available for server-side rendering of the initial HTML state.

Learnt from: dwgray
PR: #2701
File: apps/docs/src/docs/migration-guide.md:630-632
Timestamp: 2025-05-23T23:58:07.165Z
Learning: The <NotYetImplemented/> component in the bootstrap-vue-next documentation automatically renders text indicating "Not Yet Implemented", so additional explanatory text about features not being implemented is redundant when this component is used.

Learnt from: xvaara
PR: #2701
File: apps/docs/src/docs/migration-guide.md:622-626
Timestamp: 2025-06-05T11:43:10.793Z
Learning: In migration guides, links to the old/previous version's documentation (like bootstrap-vue.org) are appropriate and helpful when explaining deprecated features, as they provide users with reference points for what they're migrating from.

Learnt from: dwgray
PR: #2762
File: apps/docs/src/docs/components/tooltip.md:0-0
Timestamp: 2025-06-26T19:46:19.333Z
Learning: BTooltip is a very thin wrapper around BPopover in bootstrap-vue-next. There is no separate useTooltipController composable - the usePopoverController composable can be used to programmatically control both popovers and tooltips.

Learnt from: unstoppablecarl
PR: #2671
File: packages/bootstrap-vue-next/src/components/BToast/_toast.scss:1-3
Timestamp: 2025-04-27T17:30:42.045Z
Learning: In global SCSS files for bootstrap-vue-next, :deep() combinator should not be used as it only works in Vue's scoped style blocks. Standard CSS/SCSS selectors should be used instead.

packages/bootstrap-vue-next/src/types/index.ts (2)

Learnt from: xvaara
PR: #2425
File: packages/bootstrap-vue-next/src/plugins/popoverController/index.ts:138-140
Timestamp: 2025-04-28T22:48:46.738Z
Learning: In bootstrap-vue-next, PopoverOrchestratorParam includes an id field of type ControllerKey through inheritance from base types. This field is declared in the BvControllerOptions interface and propagated through the type hierarchy.

Learnt from: dwgray
PR: #2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type parameter for table items should use the singular form Item rather than the plural Items to improve readability and follow TypeScript conventions. This change would primarily affect two files: packages/bootstrap-vue-next/src/types/ComponentProps.ts and apps/docs/src/data/components/table.data.ts.

packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItem.vue (10)