fix(BDropdown): prevent hydration warning in nuxt production mode #2768
Conversation
|
|
WalkthroughThe change updates the style binding for the dropdown menu in the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant BDropdown
User->>BDropdown: Toggle dropdown
BDropdown->>BDropdown: Update showRef
BDropdown->>BDropdown: Recompute style binding (display: block/none)
BDropdown->>User: Render dropdown menu with correct display style
Assessment against linked issues
Poem
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed 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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue (1)
53-58: Remove hardcodedstyle="display: block"from BToast.vue & BModal.vueWe’ve located two remaining instances of a static
style="display: block"that must be updated to the reactive pattern used in BDropdown:• packages/bootstrap-vue-next/src/components/BToast/BToast.vue (line 14)
• packages/bootstrap-vue-next/src/components/BModal/BModal.vue (line 27)In each template, replace the literal
style="display: block"with a dynamic approach—e.g.:<!-- before --> <div … style="display: block"> <!-- after --> <div v-show="showRef" :style="[baseStyles, { display: showRef ? 'block' : 'none' }]" >Adjust the prop or ref name (
showRef/visible) and any existing style bindings to match each component’s API.
🧹 Nitpick comments (1)
packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue (1)
53-58: Consider eliminating the duplicated display-toggle logic.
v-showalready sets/clearselement.style.displayon the same reactive flag (showRef). Keeping an explicit{display: …}object means two separate mechanisms write the same CSS property each update. While harmless today, it is a second source of truth that can drift if one side changes.Option A (preferred): drop the inline display object and rely solely on
v-show.-:style="[floatingStyles, sizeStyles, {display: showRef ? 'block' : 'none'}]" +:style="[floatingStyles, sizeStyles]"Option B: if the explicit display inline style is required for SSR, drop the
v-showand keep the object.Either way keeps one writer for
display, simplifying future maintenance.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: unstoppablecarl
PR: bootstrap-vue-next/bootstrap-vue-next#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.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#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: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#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.
packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue (4)
Learnt from: unstoppablecarl
PR: bootstrap-vue-next/bootstrap-vue-next#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.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#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: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#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: 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.
🔇 Additional comments (1)
packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue (1)
53-58: Hydration fix makes sense – LGTM.Moving
displayinto the reactive:stylebinding eliminates the staticstyle="display: block"that caused the SSR/client mismatch. This should silence Nuxt’s hydration warning.
commit: |
Describe the PR
Fixes #2763
Small replication
A small replication or video walkthrough can help demonstrate the changes made. This is optional, but can help observe the intended changes. A mentioned issue that contains a replication also works.
PR checklist
What kind of change does this PR introduce? (check at least one)
fix(...)feat(...)fix(...)docs(...)The PR fulfills these requirements:
CHANGELOGis 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 deniedSummary by CodeRabbit