Skip to content
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.

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

fix(b-table): prevent endless reevaluation when using v-model and object/array literal prop values (fixes #5461) #5554

Merged
merged 1 commit into from
Jul 4, 2020

Conversation

IwalkAlone
Copy link
Contributor

Describe the PR

When using b-table with v-model, specifying certain props such as items and sortCompareOptions as object or array literals in the template would cause the browser to hang.

The cause was that computedItems depends on a chain of computed properties, some of which return a new array of items every time they're reevaluated, meaning that every reevaluation would cause the input event to be emitted. This would normally work because of computed property caching, but if a dependency was specified in the template using an object or array literal, the property would have to be recomputed each time resulting in an infinite loop. For example, the sortedItems computed property depends on items and sortCompareOptions (#5461 has an example using the latter and here is a similar example using the items prop)

The issue can be worked around by not using object and array literals in the template.

This PR adds an equality check to the computedItems watcher to prevent the looping, only emitting the input event if the array of items changed.

Fixes #5461

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.)

If adding a new feature, or changing the functionality of an existing feature, the PR's
description above includes:

  • A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

@vercel
Copy link

vercel bot commented Jul 3, 2020

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

🔍 Inspect: https://vercel.com/bootstrap-vue/bootstrap-vue/8c9tgkrza
✅ Preview: https://bootstrap-vue-git-fork-dataart-b-table-hang.bootstrap-vue.vercel.app

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jul 3, 2020

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 bc9186d:

Sandbox Source
optimistic-brattain-48d8m Configuration

@codecov
Copy link

codecov bot commented Jul 3, 2020

Codecov Report

Merging #5554 into dev will not change coverage.
The diff coverage is 100.00%.

Impacted file tree graph

@@            Coverage Diff            @@
##               dev     #5554   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          277       277           
  Lines         9015      9016    +1     
  Branches      2496      2497    +1     
=========================================
+ Hits          9015      9016    +1     
Flag Coverage Δ
#unittests 100.00% <100.00%> (ø)
Impacted Files Coverage Δ
src/components/table/helpers/mixin-items.js 100.00% <100.00%> (ø)

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 bc9b8de...bc9186d. Read the comment docs.

@jacobmllr95 jacobmllr95 added this to In progress in v2.16.0 via automation Jul 4, 2020
@jacobmllr95 jacobmllr95 self-requested a review July 4, 2020 12:55
@jacobmllr95 jacobmllr95 added the PR: Patch Requires patch version bump label Jul 4, 2020
@jacobmllr95 jacobmllr95 merged commit f127d91 into bootstrap-vue:dev Jul 4, 2020
v2.16.0 automation moved this from In progress to Done Jul 4, 2020
jacobmllr95 added a commit that referenced this pull request Jul 28, 2020
* chore(deps): update all non-major dependencies (#5430)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* fix(b-form-checkbox-group): only emit `input` when value loosely changes (#5432)

* fix(b-form-checkbox-group, b-form-radio-group): only emit `input` when value loosely changes

* Update loose-equal.js

* Update form-checkbox-group.spec.js

* chore(deps): update all non-major dependencies (#5440)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency vue-router to ^3.3.0 (#5443)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update all non-major dependencies (#5445)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency rollup to ^2.11.2 (#5446)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore: Change Bootstrap v4.3.x to 4.5.x in README (#5447)

Since v2.15 Bootstrap-Vue supports Bootstrap v4.5

* chore(deps): update all non-major dependencies (#5451)

* chore(deps): update all non-major dependencies

* Use `toBeEmptyDomElement()` instead of deprecated `toBeEmpty()`

* Correct typo

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(deps): update devdependency vue-router to ^3.3.2 (#5454)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): remove unused `gh-pages` dependency (#5455)

* chore(deps): update devdependency gh-pages to v3

* Remove `gh-pages` dependency

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(deps): update all non-major dependencies (#5458)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* Update all bootstrap doc links to latest version (#5450)

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(deps): update devdependency rollup to ^2.12.1 (#5463)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update all non-major dependencies (#5466)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency @nuxtjs/sitemap to ^2.3.1 (#5468)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency lint-staged to ^10.2.9 (#5470)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(b-avatar): convert line endings to Unix (#5469)

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore: convert all line endings to unix (#5474)

* chore(deps): update all non-major dependencies (#5478)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update all non-major dependencies (#5482)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency eslint-plugin-import to ^2.21.2 (#5487)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency @testing-library/jest-dom to ^5.10.0 (#5493)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update all non-major dependencies (#5495)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* first attempt (#5462)

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(deps): update all non-major dependencies (#5499)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency eslint-plugin-prettier to ^3.1.4 (#5501)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency @nuxtjs/sitemap to ^2.3.2 (#5503)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency terser to ^4.8.0 (#5505)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update all non-major dependencies (#5508)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(docs): fix typo in sidebar README (#5494) (#5510)

* chore: update auto format config (#5526)

* chore(deps): update all non-major dependencies (#5511)

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(deps): update all non-major dependencies (#5531)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* fix typo (#5534)

* remove mention of `router-tag` from button docs (#5535)

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* fix(b-table): prevent endless reevaluation when using v-model and object/array literal prop values (#5554)

* Update devDependency sass-loader to v9 (#5546)

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* fix(b-img): Allow empty `alt` prop (fixes #5524) (#5545)

* Allow empty `alt`

* default to null to avoid check

* remove unused import

* add avatar support

* add test cases

* spelling

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(deps-dev): bump standard-version from 8.0.0 to 8.0.1 (#5576)

Bumps [standard-version](https://github.com/conventional-changelog/standard-version) from 8.0.0 to 8.0.1.
- [Release notes](https://github.com/conventional-changelog/standard-version/releases)
- [Changelog](https://github.com/conventional-changelog/standard-version/blob/master/CHANGELOG.md)
- [Commits](conventional-changelog/standard-version@v8.0.0...v8.0.1)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* feat(b-form-tags): add `ignoreInputFocusSelector` prop to make input focus behavior configurable (closes #5425) (#5429)

* fix(b-form-tags): fix input focus upon clicking on nested element

* Update form-tags.js

* Add `ignoreInputFocusSelector` prop

* Update form-tags.js

* Add comment and more selectors to ignoreInputFocusSelector in form-tags.js

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(deps): update all non-major dependencies (#5533)

* chore(deps): update all non-major dependencies

* Bump BundleWatch limits for new Bootstrap Icons

* Regenerate icon files

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(docs): add an example to `<b-input-group>`'s using icons (#5537)

* Adding an example to input-groups using icons

* Update README.md

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(deps): update devdependency @nuxtjs/google-analytics to ^2.4.0 (#5583)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* fix(b-icon): use `aria-label` attribute instead of `alt` (#5581)

* fix(b-tags): replace spacing utility with static CSS (fixes #5523) (#5544)

* remove spacing utility

* use mt-auto for better centering

* update

* add new class to avoid issues with custom rendering

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(docs): improve icons page (#5579)

* feat(docs): improve icons page

* Actually use `bootstrapIconsCount` variable

* Move icon explorer to the bottom

* chore: regenerate `yarn.lock` (#5585)

* fix(b-form-tags): unit test (#5586)

* chore(deps): update devdependency rollup to ^2.22.0 (#5589)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update all non-major dependencies (#5590)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* feat(docs): launch themes page with first BootstrapVue theme (#5549)

* docs(footer): uncomment link for themes

* docs(header): uncomment link for themes

* docs(sidebar): uncomment link for themes

* docs(intro/README): uncomment link for themes

* docs(theming/README): uncomment link for themes

* feature(themes): add first Bootstrap Vue & Creative Tim theme

* style(themes): prettify themes files

* fix(themes): solve typo

* Use `@nuxt/content` for themes

* Update index.vue

* Update themes.vue

* Don't pin `@nuxt/content`

* Update themes.vue

* Update themes.vue

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* fix: properly handle special characters in user-provided IDs (closes #4927, #5561) (#5564)

* fix(b-form-group): make it work for ids with special characters like "/"

Special characters are allowed in HTML5 (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) but need to be escaped when used in a selector for usage in e.g. "querySelector"

Refs #5561

* Use own `cssEscape()` util + use/test everywhere needed

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(ci): update `actions/cache` to v2 (#5580)

* chore(ci): update `actions/cache` to v2

* Update test.yml

* Update test.yml

* fix(b-form-tags): unit tests

* Revert "fix(b-form-tags): unit tests"

This reverts commit 20ebc04.

* Split actions

* Run BundleWatch during build

* Update build.yml

* Revert "Update build.yml"

This reverts commit ed4ad3d.

* Update build.yml

* chore: replace `packagequality` badge with `codacy` in README (#5596)

* chore: replace `packagequality` badge with `codacy` in README

* Update README.md

* chore(deps): update devdependency rollup to ^2.22.2 (#5597)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency rollup to ^2.23.0 (#5603)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* remove redundant height declaration in .b-sidebar (#5606)

* chore(deps): update devdependency eslint-plugin-jest to ^23.18.2 (#5607)

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(deps): update all non-major dependencies (#5609)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(docs): fix Bootstrap browser and devices link

* chore(ci): fix BundleWatch token name

* chore: add back `packagequality` badge to README

* chore: prettify

* chore: update contributors

* chore(deps): update devdependency eslint-plugin-jest to ^23.19.0 (#5611)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore: add script to generate release notes (#5612)

* chore: bump version to 2.16.0 and update changelog (#5614)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Troy Morehouse <troymore@nbnet.nb.ca>
Co-authored-by: TitanFighter <bear_ukraine@bigmir.net>
Co-authored-by: Hiws <rni@nova-c.dk>
Co-authored-by: Vitaly Slobodin <vitaly_slobodin@fastmail.com>
Co-authored-by: Sergey Skrynnikov <minotaar.hh@gmail.com>
Co-authored-by: James George <jamesgeorge998001@gmail.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Paweł Tatarczuk <paweltatarczuk@gmail.com>
Co-authored-by: Ivan Gonzalez <scratchmex@gmail.com>
Co-authored-by: Hiws <hiws@live.dk>
Co-authored-by: Nazare Emanuel-Ioan <emanuelioannazare@gmail.com>
Co-authored-by: Dieter Geerts <dieter@dworks.be>
Co-authored-by: michel milano <mmilano@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
PR: Patch Requires patch version bump Type: Fix
Projects
No open projects
v2.16.0
  
Done
Development

Successfully merging this pull request may close these issues.

[B-Table] v-model in conjunction with sort-compare-options causes browser crash
2 participants