fix: CSidebar: fix closing sidebar onBackdropClick

Author: woothu

src/components/sidebar/CSidebar.vue

@@ -66,29 +66,17 @@ export default {
     show (val) {
       this.open = val
     },
-    open (val, oldVal) {
-      const backdrop = document.getElementsByClassName('c-sidebar-backdrop')[0]
-      if (val === true) {
-        backdrop.className = 'c-sidebar-backdrop c-show'
-      } else if (oldVal === true) {
-        backdrop.className = 'c-sidebar-backdrop d-none'
-      }
+    open (val) {
+      val === true ? this.createBackdrop() : this.removeBackdrop()
     }
   },
   mounted () {
-    const backdrop = document.createElement('div')
     if (this.open === true) {
-      backdrop.className = 'c-sidebar-backdrop c-show'
-    } else {
-      backdrop.className = 'c-sidebar-backdrop d-none'
+      this.createBackdrop()
     }
-    document.body.appendChild(backdrop)
-    backdrop.addEventListener('click', this.closeSidebar)
   },
   beforeDestroy () {
-    const backdrop = document.getElementsByClassName('c-sidebar-backdrop')[0]
-    backdrop.removeEventListener('click', this.closeSidebar)
-    document.body.removeChild(backdrop)
+    this.removeBackdrop()
   },
   computed: {
     sidebarClasses () {
@@ -116,11 +104,25 @@ export default {
       }
     },
     closeSidebar () {
-      this.open = 'responsive'
-      this.$emit('update:show', 'responsive')
+      this.open = this.overlaid ? false : 'responsive'
+      this.$emit('update:show', this.open)
     },
     isOnMobile () {
       return Boolean(getComputedStyle(this.$el).getPropertyValue('--is-mobile'))
+    },
+    createBackdrop () {
+      const backdrop = document.createElement('div')
+      backdrop.className = 'c-sidebar-backdrop c-show'
+      backdrop.id = this._uid + 'backdrop'
+      document.body.appendChild(backdrop)
+      backdrop.addEventListener('click', this.closeSidebar)
+    },
+    removeBackdrop () {
+      const backdrop = document.getElementById(this._uid + 'backdrop')
+      if (backdrop) {
+        backdrop.removeEventListener('click', this.closeSidebar)
+        document.body.removeChild(backdrop)
+      }
     }
   }
 }

src/components/sidebar/tests/CSidebar.spec.js

@@ -55,7 +55,8 @@ const App = Vue.extend({
   }
 })
 
-const sidebarWrapper = mount(App, { attachToDocument: true })
+const generateWrapper = () => mount(App, { attachToDocument: true })
+const sidebarWrapper = generateWrapper()
 const sidebarComponent = sidebarWrapper.vm.$children[0]
 
 describe(`${ComponentName} .vue`, () => {
@@ -84,6 +85,18 @@ describe(`${ComponentName} .vue`, () => {
     sidebarClick('link')
     expect(sidebarComponent.open).toBe('responsive')
   })
+  it('closes sidebar on backdrop click', () => {
+    const customWrapper = generateWrapper()
+    const customComponent = customWrapper.vm.$children[0]
+    customWrapper.setData({
+      props: {
+        overlaid: true,
+      }
+    })
+    expect(customComponent.open).toBe(true)
+    document.getElementById(customComponent._uid + 'backdrop').click()
+    expect(customComponent.open).toBe(false)
+  })
   it('watches for prop changes', () => {
     sidebarWrapper.setData({
       props: {
@@ -100,11 +113,11 @@ describe(`${ComponentName} .vue`, () => {
   })
   it('properly destroys sidebar', () => {
     const currentBackdropNumber = () => {
-      return document.getElementsByClassName('c-sidebar-backdrop').length
+      return document.getElementById(sidebarComponent._uid + 'backdrop')
     }
-    expect(currentBackdropNumber()).toBe(2)
+    expect(currentBackdropNumber()).not.toBe(null)
     sidebarWrapper.destroy()
     wrapper.destroy()
-    expect(currentBackdropNumber()).toBe(0)
+    expect(currentBackdropNumber()).toBe(null)
   })
 })