fix(VAppBar): fix elevation issue when extended

When using **hide-on-scroll** in combination with **extended**, **elevate-on-scroll** would not work as expected. fixes #8516
vuetifyjs · Aug 14, 2019 · 7736db8 · 7736db8
1 parent b03e8f6
commit 7736db8
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 0 deletions.
diff --git a/packages/vuetify/src/components/VAppBar/VAppBar.ts b/packages/vuetify/src/components/VAppBar/VAppBar.ts
@@ -172,6 +172,10 @@ export default baseMixins.extend({
       return this.bottom ? scrollOffScreen : -scrollOffScreen
     },
     hideShadow (): boolean {
+      if (this.elevateOnScroll && this.isExtended) {
+        return this.currentScroll < this.computedScrollThreshold
+      }
+
       if (this.elevateOnScroll) {
         return this.currentScroll === 0 ||
           this.computedTransform < 0

diff --git a/packages/vuetify/src/components/VAppBar/__tests__/VAppBar.spec.ts b/packages/vuetify/src/components/VAppBar/__tests__/VAppBar.spec.ts
@@ -248,4 +248,33 @@ describe('AppBar.ts', () => {
     expect(wrapper.vm.computedTransform).toBe(0)
     expect(wrapper.vm.hideShadow).toBe(false)
   })
+
+  it('should show shadow when hide-on-scroll and elevate-on-scroll and extended are all true', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        hideOnScroll: true,
+        elevateOnScroll: true,
+        extended: true
+      },
+    })
+
+    expect(wrapper.vm.computedTransform).toBe(0)
+    expect(wrapper.vm.hideShadow).toBe(true)
+
+    await scrollWindow(1000)
+
+    expect(wrapper.vm.computedTransform).toBe(-64)
+    expect(wrapper.vm.hideShadow).toBe(false)
+
+    await scrollWindow(600)
+
+    expect(wrapper.vm.computedTransform).toBe(0)
+    expect(wrapper.vm.hideShadow).toBe(false)
+
+    await scrollWindow(0)
+
+    expect(wrapper.vm.computedTransform).toBe(0)
+    expect(wrapper.vm.hideShadow).toBe(true)
+
+  })
 })