Skip to content

Fix BFormSelect modelValue not being applied during SSR #2835

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
VividLemon merged 9 commits into from
Sep 9, 2025
Merged

Fix BFormSelect modelValue not being applied during SSR #2835

VividLemon merged 9 commits into from
Sep 9, 2025

Conversation

Copy link
Contributor

Copilot AI commented Sep 6, 2025 •
edited
Loading

  • Fix BFormSelect SSR issue by adding selected attribute support
  • Add selected prop to BFormSelectOption component
  • Add selectedValue prop to BFormSelectOptionGroup component
  • Update TypeScript interfaces for new props
  • Add comprehensive tests for SSR functionality
  • Update documentation in formSelect.data.ts for new props
  • Update copilot instructions to include .data.ts file updates
  • Refactor to use provide/inject pattern instead of internal props
    • Create formSelectKey injection key for parent-child communication
    • Update BFormSelect to provide modelValue via inject/provide
    • Update BFormSelectOption to inject and compute selected state internally
    • Update BFormSelectOptionGroup to remove prop passing (child components inject directly)
    • Remove selected and selectedValue props from TypeScript interfaces

The initial implementation added selected and selectedValue props to the child components, but based on feedback these were refactored to use Vue's provide/inject pattern instead. This creates a cleaner API by removing "internal" props that users shouldn't set manually, while maintaining the same SSR functionality.

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

@bolt-new-by-stackblitz
Copy link

bolt-new-by-stackblitz bot commented Sep 6, 2025

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

Copilot AI changed the title [WIP] BFormSelect modelValue is not applied during SSR Fix BFormSelect modelValue not being applied during SSR Sep 6, 2025
Copilot AI requested a review from VividLemon September 6, 2025 02:15
@VividLemon
Copy link
Member

VividLemon commented Sep 9, 2025

@copilot this is missing documentation on the .data.ts files for new props that it has made. In addition to fixing this, make an update to the github copilot setup file so that you remember to make updates to the .data.ts files when you add new props, events, or slots

Copy link
Contributor Author

Copilot AI commented Sep 9, 2025

@copilot this is missing documentation on the .data.ts files for new props that it has made. In addition to fixing this, make an update to the github copilot setup file so that you remember to make up...

Added documentation for the new selected prop on BFormSelectOption and selectedValue prop on BFormSelectOptionGroup in formSelect.data.ts. Also updated the copilot instructions to include reminders about updating .data.ts files when adding/modifying component props, events, or slots. (fdee7eb)

VividLemon
VividLemon reviewed Sep 9, 2025
View reviewed changes
packages/bootstrap-vue-next/src/types/ComponentProps.ts Outdated
disabledField?: string
label?: string
options?: readonly (unknown | Record<string, unknown>)[]
selectedValue?: unknown
Copy link
Member

@VividLemon VividLemon Sep 9, 2025

Choose a reason for hiding this comment

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

@copilot Since these values are meant to only be "internal" set up a provide/inject bus that communicates this information. "default" values for inject will be null when possible.

Copy link
Contributor Author

Copilot AI Sep 9, 2025

Choose a reason for hiding this comment

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

I've refactored the implementation to use a provide/inject pattern instead of the internal props. The changes include:

  • Created a formSelectKey injection key in utils/keys.ts with modelValue as readonly ref
  • Updated BFormSelect to provide the modelValue context
  • Updated BFormSelectOption to inject the context and compute selected state internally
  • Updated BFormSelectOptionGroup to remove prop passing (child components inject directly)
  • Removed the selected and selectedValue props from TypeScript interfaces

The inject default value is null as requested. All tests pass and the SSR functionality is preserved while removing the "internal" props from the public API. (202b0bd)

@pkg-pr-new
Copy link

pkg-pr-new bot commented Sep 9, 2025 •
edited
Loading

bsvn-vite-ts

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

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

commit: aa17647

Copilot AI requested a review from VividLemon September 9, 2025 02:01
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Sep 9, 2025

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Comment @coderabbitai help to get the list of available commands and usage tips.

VividLemon
VividLemon reviewed Sep 9, 2025
View reviewed changes
@VividLemon VividLemon marked this pull request as ready for review September 9, 2025 02:06
@VividLemon VividLemon merged commit 44a4ccd into main Sep 9, 2025
5 checks passed
@github-actions github-actions bot mentioned this pull request Sep 9, 2025
Merged
xvaara added a commit to xvaara/bootstrap-vue-next that referenced this pull request Sep 11, 2025
@xvaara
Merge remote-tracking branch 'upstream/main'
099f75e 
* upstream/main: (32 commits)
  chore: release main (bootstrap-vue-next#2838)
  feat(BButtonToolbar): Add keyboard navigation support (bootstrap-vue-next#2837)
  fix(BFormSelect): modelValue not being applied during SSR (bootstrap-vue-next#2835)
  feat(BTable): Implement keyboard navigation (bootstrap-vue-next#2834)
  fix: BOffcanvas responsive SSR compatibility - defer breakpoint evaluation to client-side (bootstrap-vue-next#2833)
  chore: release main (bootstrap-vue-next#2831)
  fix(BDropdown): transition broken by inline display styles (bootstrap-vue-next#2832)
  feat: change useColorMode selector from 'body' to 'html' (bootstrap-vue-next#2830)
  chore: release main (bootstrap-vue-next#2817)
  feat: Add headerAttrs prop to BOffcanvas and BModal components
  docs: Add useScrollspy documentation
  fix: Remove lazy-modifier warning on FormInput docs (bootstrap-vue-next#2825)
  feat(BSort)!: Implement initial-sort-direction and move compare from sort-by to fields (bootstrap-vue-next#2777)
  docs(table): fix incorrect list item (bootstrap-vue-next#2823)
  docs: Fix grammar in documentation data files (bootstrap-vue-next#2816)
  doc(BTooltip): Parity pass (bootstrap-vue-next#2762)
  docs(BOverlay): Parity pass (bootstrap-vue-next#2767)
  feat: implement BFormRating disabled state (bootstrap-vue-next#2753) (bootstrap-vue-next#2793)
  docs: fix otp for index and reference pages (bootstrap-vue-next#2819)
  docs(BApp): add some additional details around legacy plugin use (bootstrap-vue-next#2820)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@VividLemon VividLemon VividLemon approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@VividLemon VividLemon

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@VividLemon