diff --git a/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.ts b/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.ts index bafc39225be..4822cd884c3 100644 --- a/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.ts +++ b/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.ts @@ -91,6 +91,10 @@ export default mixins( }, }, + watch: { + canScroll: 'onScroll', + }, + created () { /* istanbul ignore next */ if (this.$attrs.hasOwnProperty('active')) { @@ -100,8 +104,16 @@ export default mixins( methods: { thresholdMet () { - this.isActive = !this.isScrollingUp - this.$emit('update:input-value', this.isActive) + if (this.hideOnScroll) { + this.isActive = !this.isScrollingUp || + this.currentScroll > this.computedScrollThreshold + + this.$emit('update:input-value', this.isActive) + } + + if (this.currentThreshold < this.computedScrollThreshold) return + + this.savedScroll = this.currentScroll }, updateApplication (): number { return this.$el diff --git a/packages/vuetify/src/components/VBottomNavigation/__tests__/VBottomNavigation.spec.ts b/packages/vuetify/src/components/VBottomNavigation/__tests__/VBottomNavigation.spec.ts index 79be6dd5cd9..884656f7296 100644 --- a/packages/vuetify/src/components/VBottomNavigation/__tests__/VBottomNavigation.spec.ts +++ b/packages/vuetify/src/components/VBottomNavigation/__tests__/VBottomNavigation.spec.ts @@ -87,29 +87,31 @@ describe('VBottomNavigation.ts', () => { expect(spy).toHaveBeenCalledTimes(2) }) - it('should fire an event and activate/deactivate when reached threshold', async () => { + it('should fire an event and activate/deactivate when reached threshold and using hideOnScroll', async () => { const updateInputValue = jest.fn() - const wrapper = mountFunction() + const wrapper = mountFunction({ + propsData: { hideOnScroll: true }, + }) wrapper.vm.$on('update:input-value', updateInputValue) expect(updateInputValue).not.toHaveBeenCalled() // Scrolling down wrapper.vm.currentScroll = 1000 - wrapper.vm.previousScroll = 900 + wrapper.vm.previousScroll = 0 wrapper.vm.isScrollingUp = false wrapper.vm.thresholdMet() - expect(updateInputValue).toHaveBeenCalled() + expect(updateInputValue).toHaveBeenCalledTimes(1) expect(wrapper.vm.isActive).toBeTruthy() - // Scrolling down - wrapper.vm.currentScroll = 900 + // Scrolling up + wrapper.vm.currentScroll = 0 wrapper.vm.previousScroll = 1000 wrapper.vm.isScrollingUp = true wrapper.vm.thresholdMet() - expect(updateInputValue).toHaveBeenCalled() + expect(updateInputValue).toHaveBeenCalledTimes(2) expect(wrapper.vm.isActive).toBeFalsy() })