fix(VBottomNavigation): only calculate isActive state when using hide…

…OnScroll fixes #11640
vuetifyjs · Nov 30, 2021 · f58afb4 · f58afb4
1 parent ea96084
commit f58afb4
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git 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
@@ -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()
   })