From 3dc1b84a0287fce0afa27885d760e342a56beba2 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 29 Sep 2019 11:45:31 -0300 Subject: [PATCH 1/2] fix(b-table): minor optimizations to filter debouncing --- .../table/helpers/mixin-filtering.js | 24 +++++++------------ 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/src/components/table/helpers/mixin-filtering.js b/src/components/table/helpers/mixin-filtering.js index 89a28c79c10..550103c08b3 100644 --- a/src/components/table/helpers/mixin-filtering.js +++ b/src/components/table/helpers/mixin-filtering.js @@ -96,21 +96,18 @@ export default { // We need a deep watcher in case the user passes // an object when using `filter-function` deep: true, - handler(newFilter, oldFilter) { + handler(newCriteria, oldCriteria) { const timeout = this.computedFilterDebounce - if (this.$_filterTimer) { - clearTimeout(this.$_filterTimer) - this.$_filterTimer = null - } - if (timeout) { + clearTimeout(this.$_filterTimer) + this.$_filterTimer = null + if (timeout && timeout > 0) { // If we have a debounce time, delay the update of `localFilter` this.$_filterTimer = setTimeout(() => { - this.$_filterTimer = null - this.localFilter = this.filterSanitize(this.filter) + this.localFilter = this.filterSanitize(newCriteria) }, timeout) } else { // Otherwise, immediately update `localFilter` with `newFilter` value - this.localFilter = this.filterSanitize(newFilter) + this.localFilter = this.filterSanitize(newCriteria) } } }, @@ -154,12 +151,9 @@ export default { this.isFiltered = Boolean(this.localFilter) }) }, - beforeDestroy() { - /* istanbul ignore next */ - if (this.$_filterTimer) { - clearTimeout(this.$_filterTimer) - this.$_filterTimer = null - } + beforeDestroy() /* istanbul ignore next */ { + clearTimeout(this.$_filterTimer) + this.$_filterTimer = null }, methods: { filterSanitize(criteria) { From e44329c0a8e987788eec73137094a2acddc2f387 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 29 Sep 2019 13:33:39 -0300 Subject: [PATCH 2/2] Update table-filtering.spec.js --- src/components/table/table-filtering.spec.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/components/table/table-filtering.spec.js b/src/components/table/table-filtering.spec.js index a4441762368..2a79ba09c0f 100644 --- a/src/components/table/table-filtering.spec.js +++ b/src/components/table/table-filtering.spec.js @@ -238,6 +238,7 @@ describe('table > filtering', () => { it('filter debouncing works', async () => { jest.useFakeTimers() + let lastFilterTimer = null const wrapper = mount(BTable, { propsData: { fields: testFields, @@ -254,6 +255,7 @@ describe('table > filtering', () => { expect(wrapper.emitted('input').length).toBe(1) expect(wrapper.emitted('input')[0][0]).toEqual(testItems) expect(wrapper.vm.$_filterTimer).toBe(null) + lastFilterTimer = wrapper.vm.$_filterTimer // Set filter to a single character wrapper.setProps({ @@ -262,6 +264,9 @@ describe('table > filtering', () => { await waitNT(wrapper.vm) expect(wrapper.emitted('input').length).toBe(1) expect(wrapper.vm.$_filterTimer).not.toBe(null) + expect(wrapper.vm.$_filterTimer).not.toEqual(lastFilterTimer) + lastFilterTimer = wrapper.vm.$_filterTimer + expect(wrapper.vm.localFilter).not.toEqual('1') // Change filter wrapper.setProps({ @@ -270,12 +275,17 @@ describe('table > filtering', () => { await waitNT(wrapper.vm) expect(wrapper.emitted('input').length).toBe(1) expect(wrapper.vm.$_filterTimer).not.toBe(null) + expect(wrapper.vm.$_filterTimer).not.toEqual(lastFilterTimer) + lastFilterTimer = wrapper.vm.$_filterTimer + expect(wrapper.vm.localFilter).not.toEqual('z') jest.runTimersToTime(101) await waitNT(wrapper.vm) expect(wrapper.emitted('input').length).toBe(2) expect(wrapper.emitted('input')[1][0]).toEqual([testItems[2]]) - expect(wrapper.vm.$_filterTimer).toBe(null) + expect(wrapper.vm.$_filterTimer).toEqual(lastFilterTimer) + lastFilterTimer = wrapper.vm.$_filterTimer + expect(wrapper.vm.localFilter).toEqual('z') // Change filter wrapper.setProps({ @@ -284,6 +294,10 @@ describe('table > filtering', () => { await waitNT(wrapper.vm) expect(wrapper.vm.$_filterTimer).not.toBe(null) expect(wrapper.emitted('input').length).toBe(2) + expect(wrapper.vm.$_filterTimer).not.toEqual(lastFilterTimer) + lastFilterTimer = wrapper.vm.$_filterTimer + expect(wrapper.vm.localFilter).not.toEqual('1') + expect(wrapper.vm.localFilter).toEqual('z') // Change filter-debounce to no debouncing wrapper.setProps({ @@ -295,6 +309,7 @@ describe('table > filtering', () => { // Should immediately filter the items expect(wrapper.emitted('input').length).toBe(3) expect(wrapper.emitted('input')[2][0]).toEqual([testItems[1]]) + expect(wrapper.vm.localFilter).toEqual('1') wrapper.destroy() })