[Popover] Popovers whose both title and content are zero-length are n…

…ever displayed.
uiv-lib · Nov 6, 2017 · 2522221 · 2522221
1 parent ac19b34
commit 2522221
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 25 deletions.
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
@@ -1,4 +1,4 @@
-### Browser and uiv version
+### Version & browser
 
 
 ### Which component
@@ -11,6 +11,3 @@
 
 
 ### Actual behavior
-
-
-
diff --git a/docs/pages/components/Popover.md b/docs/pages/components/Popover.md
@@ -4,11 +4,13 @@
 
 ## Example
 
+**Note**: Popovers whose both title and content are zero-length are never displayed.
+
 Click the button below to toggle popover:
 
 ```html
-<button type="button" class="btn btn-primary" id="popover-trigger">Popover</button>
-<popover title="Title" target="#popover-trigger">
+<button type="button" class="btn btn-primary" id="btn">Popover</button>
+<popover title="Title" target="#btn">
   <div slot="popover">
     <h1>Hello world!</h1>
   </div>
@@ -123,7 +125,7 @@ Set `enable` prop to `false` to disable a popover.
 
 ```html
 <popover title="Title" :enable="false">
-  <button type="button" class="btn btn-primary" id="disabled-trigger">Disabled Popover</button>
+  <button type="button" class="btn btn-primary">Disabled Popover</button>
   <div slot="popover">
     <h1>Hello world!</h1>
   </div>

diff --git a/src/components/popover/Popover.vue b/src/components/popover/Popover.vue
@@ -169,23 +169,22 @@
         utils.off(window, utils.events.CLICK, this.windowClicked)
       },
       show () {
-        let popover = this.$refs.popover
-        if (!this.enable || !this.triggerEl || this.isShown()) {
-          return
-        }
-        if (this.timeoutId > 0) {
-          clearTimeout(this.timeoutId)
-          this.timeoutId = 0
-        } else {
-          popover.className = `${BASE_CLASS} ${this.placement}`
-          let container = document.querySelector(this.appendTo)
-          container.appendChild(popover)
-          utils.setTooltipPosition(popover, this.triggerEl, this.placement, this.autoPlacement, this.appendTo)
-          popover.offsetHeight
+        if (this.enable && this.triggerEl && (this.title || this.content || this.$slots.popover) && !this.isShown()) {
+          let popover = this.$refs.popover
+          if (this.timeoutId > 0) {
+            clearTimeout(this.timeoutId)
+            this.timeoutId = 0
+          } else {
+            popover.className = `${BASE_CLASS} ${this.placement}`
+            let container = document.querySelector(this.appendTo)
+            container.appendChild(popover)
+            utils.setTooltipPosition(popover, this.triggerEl, this.placement, this.autoPlacement, this.appendTo)
+            popover.offsetHeight
+          }
+          utils.addClass(popover, SHOW_CLASS)
+          this.$emit('input', true)
+          this.$emit('show')
         }
-        utils.addClass(popover, SHOW_CLASS)
-        this.$emit('input', true)
-        this.$emit('show')
       },
       hide () {
         if (this.isShown()) {

diff --git a/test/unit/specs/Popover.spec.js b/test/unit/specs/Popover.spec.js
@@ -31,7 +31,7 @@ describe('Popover', () => {
   })
 
   it('should be able to show popover on init', async () => {
-    let res = Vue.compile('<popover v-model="show"><button data-role="trigger"></button></popover>')
+    let res = Vue.compile('<popover v-model="show" title="123"><button data-role="trigger"></button></popover>')
     let vm = new Vue({
       data () {
         return {
@@ -49,8 +49,27 @@ describe('Popover', () => {
     vm.$destroy()
   })
 
+  it('should not show popover with no title and content', async () => {
+    let res = Vue.compile('<popover v-model="show"><button data-role="trigger"></button></popover>')
+    let vm = new Vue({
+      data () {
+        return {
+          show: true
+        }
+      },
+      components: {Popover},
+      render: res.render,
+      staticRenderFns: res.staticRenderFns
+    }).$mount()
+    await utils.sleep(200)
+    expect(document.querySelectorAll('.popover').length).to.equal(0)
+    $(vm.$el).remove()
+    $('.popover').remove()
+    vm.$destroy()
+  })
+
   it('should be able to use custom target', async () => {
-    let res = Vue.compile('<div><button ref="btn" type="button">btn</button><popover :target="btn" trigger="focus"></popover></div>')
+    let res = Vue.compile('<div><button ref="btn" type="button">btn</button><popover :target="btn" trigger="focus" title="123"></popover></div>')
     let vm = new Vue({
       data () {
         return {