fix(BTable): always allow text selection when properties "selectable" and "no-select-on-click" are used together #2947

tbl0605 · 2025-12-12T14:39:57Z

Hello,
there's a specific case where text selection with the mouse is impossible in a b-table.

I have b-tables where I simultaneously use the "selectable" and "no-select-on-click" properties because I manage row selection myself using the unselectRow() and selectRow() methods.

Using the properties "selectable" and "no-select-on-click" doesn't need to disable text selection when a table row is selected, so let's fix that (and let make my users happy again).

Btw, the condition props.selectable && !props.noSelectOnClick is already used elsewhere in the bootstrap-vue-next code.

Small replication

I created 2 demos (each with the same table inside) so you can compare the results with and without this fix by trying to select text in the b-table before and after clicking some of the "Select/Deselect" buttons:

"buggy" version (text selection doesn't work in the b-table when a row is selected) : https://stackblitz.com/edit/github-huqpsoqb-sbg3hjra
patched version allowing text selection when a row is selected: https://stackblitz.com/edit/github-huqpsoqb-bogxgahy

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

Bug Fixes

Fixed BTable component to properly respect the noSelectOnClick property during item selection. When enabled, the table now correctly manages text-selection behavior, delivering more predictable user interactions with selectable tables.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

… and "no-select-on-click" are used together

bolt-new-by-stackblitz · 2025-12-12T14:40:00Z

Run & review this pull request in StackBlitz Codeflow.

coderabbitai · 2025-12-12T14:40:09Z

Walkthrough

Modified the tableClasses computed property in BTable.vue to add a conditional guard for the user-select-none CSS class. The class now applies only when both isSelecting is active and noSelectOnClick is false, providing finer control over user selection behavior during table interactions.

Changes

Cohort / File(s)	Summary
BTable selection behavior `packages/bootstrap-vue-next/src/components/BTable/BTable.vue`	Added conditional guard to `user-select-none` class in `tableClasses` computed property; class now applies only when selecting is active AND `noSelectOnClick` is false

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~5–10 minutes

Single file modified with a straightforward condition logic change in the tableClasses computed property
Verify the new guard condition (!props.noSelectOnClick) aligns with intended selection behavior

Possibly related PRs

feat(BTable): implement 'fixed' and 'noBorderCollapse' props #2681: Modifies the same tableClasses computed property in BTable.vue, applying different conditional logic for CSS class application

Suggested reviewers

VividLemon

Poem

🐰 A table's touch, now finer still,
When noSelectOnClick bends to will,
User-select takes a graceful bow,
Selection flows the right way now! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the bug fix—allowing text selection when both selectable and no-select-on-click properties are used together, which directly corresponds to the main change in the changeset.
Description check	✅ Passed	The description provides clear context about the bug, includes a detailed explanation with StackBlitz demos for reproduction, and confirms the PR checklist including Conventional Commits compliance as required by the template.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

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

📜 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 9cfe4a0 and 5642ce8.

📒 Files selected for processing (1)

packages/bootstrap-vue-next/src/components/BTable/BTable.vue (1 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

**/*.{ts,tsx,js,jsx,vue}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use conventional commit format with prefixes like feat:, fix:, docs:, etc. for all commits

Files:

packages/bootstrap-vue-next/src/components/BTable/BTable.vue

packages/bootstrap-vue-next/src/components/**/*.vue

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Edit component files in packages/bootstrap-vue-next/src/components/ and test using packages/bootstrap-vue-next/src/App.vue with hot-reload via pnpm --filter bootstrap-vue-next run dev

Files:

packages/bootstrap-vue-next/src/components/BTable/BTable.vue

🧠 Learnings (4)

📓 Common learnings

Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2777
File: packages/bootstrap-vue-next/CHANGELOG.md:11-11
Timestamp: 2025-08-18T18:20:08.240Z
Learning: For PR #2777 (BSort updates), keep changes scoped to BTable sorting work; unrelated edits like CHANGELOG typos should be deferred to a separate PR/issue.

📚 Learning: 2025-05-28T07:32:45.658Z

Learnt from: xvaara
Repo: bootstrap-vue-next/bootstrap-vue-next 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.

Applied to files:

packages/bootstrap-vue-next/src/components/BTable/BTable.vue

📚 Learning: 2025-05-28T07:57:19.915Z

Learnt from: xvaara
Repo: bootstrap-vue-next/bootstrap-vue-next 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.

Applied to files:

packages/bootstrap-vue-next/src/components/BTable/BTable.vue

📚 Learning: 2025-05-28T07:01:55.095Z

Learnt from: xvaara
Repo: bootstrap-vue-next/bootstrap-vue-next 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.

Applied to files:

packages/bootstrap-vue-next/src/components/BTable/BTable.vue

⏰ 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

🔇 Additional comments (1)

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

387-394: Guarding user-select-none with !props.noSelectOnClick aligns the CSS class condition with selection logic.

The guard condition props.selectable && !props.noSelectOnClick && isSelecting.value correctly:

Matches the keyboard row navigation gate at line 340: props.selectable && !props.noSelectOnClick

Matches the row click handler guard at lines 877–879: if (props.noSelectOnClick === false)

Permits text selection when rows are selected but click-selection is disabled (noSelectOnClick=true)

This resolves the UX conflict where disabling click-selection should not also prevent text selection.

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

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

pkg-pr-new · 2025-12-12T14:42:57Z

bsvn-vite-ts

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

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

commit: 5642ce8

VividLemon · 2025-12-12T14:49:14Z

I don't quite understand. What is allowing text selection? I'm getting seemingly the same results both ways.

tbl0605 · 2025-12-12T15:06:53Z

I don't quite understand. What is allowing text selection? I'm getting seemingly the same results both ways.

select text "TOTAL PAYMENT =>"
click on button "Select/Unselect"
try to select text "TOTAL PAYMENT =>" again, it won't work anymore. If you do the same with my patched version, you can select the text again

VividLemon

Weird

fix(BTable): always allow user selection when properties "selectable"…

5642ce8

… and "no-select-on-click" are used together

VividLemon self-requested a review December 12, 2025 14:44

VividLemon approved these changes Dec 12, 2025

View reviewed changes

VividLemon merged commit bf17415 into bootstrap-vue-next:main Dec 12, 2025
5 checks passed

github-actions bot mentioned this pull request Dec 12, 2025

chore: release main #2931

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(BTable): always allow text selection when properties "selectable" and "no-select-on-click" are used together #2947

fix(BTable): always allow text selection when properties "selectable" and "no-select-on-click" are used together #2947

Uh oh!

tbl0605 commented Dec 12, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

bolt-new-by-stackblitz bot commented Dec 12, 2025

Uh oh!

coderabbitai bot commented Dec 12, 2025 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Dec 12, 2025

Uh oh!

VividLemon commented Dec 12, 2025

Uh oh!

tbl0605 commented Dec 12, 2025

Uh oh!

VividLemon left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

fix(BTable): always allow text selection when properties "selectable" and "no-select-on-click" are used together #2947

fix(BTable): always allow text selection when properties "selectable" and "no-select-on-click" are used together #2947

Uh oh!

Conversation

tbl0605 commented Dec 12, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Small replication

PR checklist

Summary by CodeRabbit

Bug Fixes

Uh oh!

bolt-new-by-stackblitz bot commented Dec 12, 2025

Uh oh!

coderabbitai bot commented Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Pre-merge checks and finishing touches

Uh oh!

pkg-pr-new bot commented Dec 12, 2025

Uh oh!

VividLemon commented Dec 12, 2025

Uh oh!

tbl0605 commented Dec 12, 2025

Uh oh!

VividLemon left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

tbl0605 commented Dec 12, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Dec 12, 2025 •

edited

Loading