Handle dynamically adding sortable fields after table render (fixes #5520)

[Hiws]

Describe the PR

Fixes the issue where dynamically adding a sortable field after the table has been mounted wouldn't be sorting on click.

It appears that if the handlers aren't present when mounted the first time, they can't be added later on a re-render. Even if they're present in the render data.
I personally don't think this is a proper solution, but I'm opening the PR to welcome discussion about a better one.

Before: https://codesandbox.io/s/bvtable-sortable-g6lyz-18rid?file=/App.vue
After: https://codesandbox.io/s/bvtable-sortable-g6lyz-m5q52?file=/App.vue

Closes: #5520

PR checklist

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

• Bugfix (fixes a boo-boo in the code) - fix(...), requires a patch version update
• Feature (adds a new feature to BootstrapVue) - feat(...), requires a minor version update
• Enhancement (augments an existing feature) - feat(...), requires a minor version update
• ARIA accessibility (fixes or improves ARIA accessibility) - fix(...), requires a patch or minor version update
• Documentation update (improves documentation or typo fixes) - chore(docs), requires a patch version update
• Other (please describe)

Does this PR introduce a breaking change? (check one)

• No
• Yes (please describe since breaking changes require a minor version update)

The PR fulfills these requirements:

• It's submitted to the dev branch, not the master branch
• When resolving a specific issue, it's referenced in the PR's title (i.e. [...] (fixes #xxx[,#xxx]), where "xxx" is the issue number)
• It should address only one issue or feature. If adding multiple features or fixing a bug and adding a new feature, break them into separate PRs if at all possible.
• The title should follow the Conventional Commits naming convention (i.e. fix(alert): not alerting during SSR render, docs(badge): update pill examples, chore(docs): fix typo in README, etc). This is very important, as the CHANGELOG is generated from these messages, and determines the next version type (patch or minor).

If new features/enhancement/fixes are added or changed:

• Includes documentation updates
• Includes component package.json meta section updates (prop, slot and event changes/updates)
• Includes any needed TypeScript declaration file updates
• New/updated tests are included and passing (required for new features and enhancements)
• Existing test suites are passing
• CodeCov for patch has met target (all changes/updates have been tested)
• The changes have not impacted the functionality of other components or directives
• ARIA Accessibility has been taken into consideration (Does it affect screen reader users or keyboard only users? Clickable items should be in the tab index, etc.)

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click on the icon next to each commit.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 2c1c48e:

Sandbox	Source
BootstrapVue Starter Project	Configuration
bvtable-sortable-g6lyz	PR
bvtable-sortable-g6lyz	PR
bvtable-sortable-g6lyz	Issue #5520
bvtable-sortable-g6lyz	Issue #5520

[codecov]

Codecov Report

Merging #5521 into dev will decrease coverage by 0.01%.
The diff coverage is 66.66%.

@@             Coverage Diff             @@
##               dev    #5521      +/-   ##
===========================================
- Coverage   100.00%   99.98%   -0.02%     
===========================================
  Files          278      278              
  Lines         9409     9411       +2     
  Branches      2514     2514              
===========================================
+ Hits          9409     9410       +1     
- Misses           0        1       +1     

Flag	Coverage Δ
#unittests	99.98% <66.66%> (-0.02%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
src/components/table/helpers/mixin-thead.js	98.48% <66.66%> (-1.52%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0247a0e...2c1c48e. Read the comment docs.

[alfianwahid]

Hi @Hiws
How if the key in mixin-thead.js dynamically with combination isSortable. It's working too for this case.

bootstrap-vue/src/components/table/helpers/mixin-thead.js

Line 124 in abc7aef

key

like key: key+isSortable

[Hiws]

Hi @Hiws
How if the key in mixin-thead.js dynamically with combination isSortable. It's working too for this case.

bootstrap-vue/src/components/table/helpers/mixin-thead.js

Line 124 in abc7aef

key

like key: key+isSortable

That looks to work as well.
But feels dirty like the other solution.

Will keep looking to see if i can find the actual issue

[Hiws]

After looking into it a bit more, it looks like the changes made in this #4825 PR, broke it.

Changing this line back to on: $listeners, looks to fix it.

bootstrap-vue/src/components/table/td.js

Line 197 in e4d271a

on: this.bvListeners

Which, based on my guess means there's something wrong with the cache mixin
https://github.com/bootstrap-vue/bootstrap-vue/blob/v2.15.0/src/utils/cache.js

However, i can't figure out how to fix it.
Perhaps @jackmu95 has an idea.

[jacobmllr95]

After looking into it a bit more, it looks like the changes made in this #4825 PR, broke it.

Changing this line back to on: $listeners, looks to fix it.

bootstrap-vue/src/components/table/td.js

Line 197 in e4d271a

on: this.bvListeners

Which, based on my guess means there's something wrong with the cache mixin
https://github.com/bootstrap-vue/bootstrap-vue/blob/v2.15.0/src/utils/cache.js

However, i can't figure out how to fix it.
Perhaps @jackmu95 has an idea.

Yeah, I noticed that the $attrs/$listener cache mixins have some problems with reactivity in some cases.
I hope I find time to look into it by the end of next week.

Further investigations are always welcome :)

[Hiws]

Gonna close this for now as i can't find a good solution.
Might be worth coming back to after Vue 3 support has been added to see if it has changed anything.