Skip to content
This repository has been archived by the owner on May 25, 2018. It is now read-only.

"TypeError: popover is null" issue in firefox (with solution) #510

Open
OneOfTheWorld opened this issue Aug 7, 2017 · 2 comments
Open

Comments

@OneOfTheWorld
Copy link

Branch: master
Error description:
<div class="cntr-flag" v-if="!isUseDefaultCost"> <tooltip effect="scale" placement="left" trigger="click"> <div slot="content" style="width: 150px;"> Container Size/Type: {{cntrSizeType}} </div> <div class="cntr-rotate"> {{cntrSizeType}} </div> </tooltip> </div>
as the above code, I want to use Tooltip.vue to show some tips to user, but found that
In chrome, the tooltip can always show rightly, but in firefox the tooltip sometimes can not show rightly:
Right one:
image

Wrong one:
image
and the console output the following error:
image

@OneOfTheWorld
Copy link
Author

OneOfTheWorld commented Aug 7, 2017

Reason:
Issue file: vue-strap/src/Tooltip.vue

<div v-el:popover v-if="show" style="display:block;"
    :class="['tooltip',placement]"
    :transition="effect"

Issue file: vue-strap/src/utils/popoverMixins.js

toggle (e) {
      if (e && this.trigger === 'contextmenu') e.preventDefault()
      if (!(this.show = !this.show)) { return }
      setTimeout(() => {
        const popover = this.$els.popover
        const trigger = this.$els.trigger.children[0]
        switch (this.placement) {
          case 'top' :
            this.position.left = trigger.offsetLeft - popover.offsetWidth / 2 + trigger.offsetWidth / 2
            this.position.top = trigger.offsetTop - popover.offsetHeight
            break
.........

when call toggle function, once set the "this.show = true", then the VUE will take time to render the popover div , but In firefox the setTimeout may execute before the popover div rendered, so it will cause the popover el null error.

@OneOfTheWorld
Copy link
Author

Solution
Target File: vue-strap/src/utils/popoverMixins.js

in toggle function, change setTimeout function to the following:

Vue.nextTick(() => {
  const popover = this.$els.popover
  const trigger = this.$els.trigger.children[0]
  switch (this.placement) {
    case 'top' :
      this.position.left = trigger.offsetLeft - popover.offsetWidth / 2 + trigger.offsetWidth / 2
      this.position.top = trigger.offsetTop - popover.offsetHeight
      break
    case 'left':
      this.position.left = trigger.offsetLeft - popover.offsetWidth
      this.position.top = trigger.offsetTop + trigger.offsetHeight / 2 - popover.offsetHeight / 2
      break
    case 'right':
      this.position.left = trigger.offsetLeft + trigger.offsetWidth
      this.position.top = trigger.offsetTop + trigger.offsetHeight / 2 - popover.offsetHeight / 2
      break
    case 'bottom':
      this.position.left = trigger.offsetLeft - popover.offsetWidth / 2 + trigger.offsetWidth / 2
      this.position.top = trigger.offsetTop + trigger.offsetHeight
      break
    default:
      console.warn('Wrong placement prop')
  }
  popover.style.top = this.position.top + 'px'
  popover.style.left = this.position.left + 'px'
});

@OneOfTheWorld OneOfTheWorld changed the title "TypeError: popover is null" issue in firefox "TypeError: popover is null" issue in firefox (with solution) Aug 8, 2017
OneOfTheWorld pushed a commit to OneOfTheWorld/vue-strap that referenced this issue Aug 8, 2017
shaoxiong789 added a commit that referenced this issue Nov 8, 2017
Proposed fixing for  #510: "TypeError: popover is null" issue in fire…
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant