fix: always close overlaid sidebar on outside click

Author: woothu

src/components/template/CSidebar.vue

@@ -66,15 +66,18 @@ export default {
     show (val) {
       this.open = val
     },
-    open (val) {
-      val === true ? this.createBackdrop() : this.removeBackdrop()
-    }
-  },
-  mounted () {
-    if (this.open === true) {
-      this.createBackdrop()
+    open: {
+      immediate: true,
+      handler (val) {
+        val === true ? this.createBackdrop() : this.removeBackdrop()
+      }
     }
   },
+  // mounted () {
+  //   if (this.open === true) {
+  //     this.createBackdrop()
+  //   }
+  // },
   beforeDestroy () {
     this.removeBackdrop()
   },
@@ -110,16 +113,29 @@ export default {
     isOnMobile () {
       return Boolean(getComputedStyle(this.$el).getPropertyValue('--is-mobile'))
     },
+    sidebarCloseListener (e) {
+      if (
+        document.getElementById(this._uid + 'backdrop') &&
+        !this.$el.contains(e.target)
+      ) {
+        this.closeSidebar()
+      }
+    },
     createBackdrop () {
       const backdrop = document.createElement('div')
+      if (this.overlaid) {
+        document.addEventListener('click', this.sidebarCloseListener, true)
+      } else {
+        backdrop.addEventListener('click', this.closeSidebar)
+      }
       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) {
+        document.removeEventListener('click', this.sidebarCloseListener)
         backdrop.removeEventListener('click', this.closeSidebar)
         document.body.removeChild(backdrop)
       }

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

@@ -85,16 +85,24 @@ describe(`${ComponentName} .vue`, () => {
     sidebarClick('link')
     expect(sidebarComponent.open).toBe('responsive')
   })
-  it('closes sidebar on backdrop click', () => {
+  it('closes sidebar on outside click when overlaid', () => {
     const customWrapper = generateWrapper()
     const customComponent = customWrapper.vm.$children[0]
+    customWrapper.setData({
+      props: {
+        show: false
+      }
+    })
     customWrapper.setData({
       props: {
         overlaid: true,
+        show: true
       }
     })
     expect(customComponent.open).toBe(true)
-    document.getElementById(customComponent._uid + 'backdrop').click()
+    customComponent.$el.click()
+    expect(customComponent.open).toBe(true)
+    document.body.click()
     expect(customComponent.open).toBe(false)
   })
   it('watches for prop changes', () => {