Vuesax: Issue with VsButton

[lk77]

• Your OS : Ubuntu 18.10
• Node.js version : 11.10.1
• Vuesax version : 3.8.75
• Browser version : chrome 75
• Which package manager did you use for the install? npm

Hello,

we have an issue with VsButton,
line 252 to line 255 :

      let btn = this.$refs.btn
      let xEvent = event.offsetX
      let yEvent = event.offsetY
      let radio = btn.clientWidth * 3

sometimes this.$refs.btn is undefined and btn.clientWidth fails :

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'clientWidth' of undefined"

found in

---> <VsButton> at vsButton.vue
       <VsPrompt> at index.vue

it happens when using the button with a vs prompt.

TypeError: Cannot read property 'clientWidth' of undefined
    at VueComponent.clickButton (vendor.js?id=1d679b71abe3382ea820:14433)
    at click (vendor.js?id=1d679b71abe3382ea820:14300)
    at invokeWithErrorHandling (app.js?id=490a4e36a07710a3ac75:137455)
    at HTMLButtonElement.invoker (app.js?id=490a4e36a07710a3ac75:137780)
    at HTMLButtonElement.original._wrapper (app.js?id=490a4e36a07710a3ac75:143133)

do you have any idea why this is happening ?

thanks.

[lk77]

Hello,

this seems resolved in the new version, i don't know what the issue was, but it's gone.

thanks.

[NoahCardoza]

I fixed it by changing @click to @click.native. I think it has to do with the button being removed from the DOM. One of its parents has a v-if and when the button is clicked its parent gets removed.

[NoahCardoza]

After further testing I can confirm it has to do with the button being removed by the parent. When changing v-if to v-show the error is no more. I assume something in the callback tries to access some refs after the element is removed.

[sneko]

@NoahCardoza @luisDanielRoviraContreras

I tried @click and @click.native, and I always get this error. Since I was in nested components I decided to try at the root so I did inside the App root component:

  mounted () {
    this.$vs.dialog({
      type:'confirm',
      color: 'danger',
      title: 'Confirm',
      text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
      accept: () => {}
    })
  },

And if I close the popup I see the error.

Any idea would be appreciated :)

Thank you,

[NoahCardoza]

Like I said, try using v-show. I think the button is trying to access the parent which cases errors when it mysteriously disappears from the DOM. The whole thing seems kinda silly, I have no idea why it would need to access the parent... but it is what it is.

[lk77]

It's a dialog, once clicked, both the button and the parent dialog disappear.

[sneko]

@NoahCardoza as I said I put the code on the "Application" root component. So there is no v-if/v-show on any parent. (maybe I didn't understand what you meant?)

[NoahCardoza]

Ah yes, I remember now, I was using a custom component that acted like a dialog, which is how I found this issue.

The code looked something like this:

<template>
  <MyPopover v-show="active">
    <v-button @click="active = false">Close</v-button>
  </MyPopover>
</template>

Where the popovers position was set to absolute and centered across the screen. Which is basically the same as the dialog component created by $vs.dialog(...). When using v-if I was getting errors from the button, but when I only set display: none on MyPopover then the error didn't persist. That's what lead me to assuming the v-button element was trying to access the parent element (the v-dialog, or in my case MyPopover).

I wonder if it has anything to do with the animations that occur on clicking?

[zoi-aoba]

@NoahCardoza maybe you are god, thanks a lot.........

[ngekoding]

I fixed it by changing @click to @click.native. I think it has to do with the button being removed from the DOM. One of its parents has a v-if and when the button is clicked its parent gets removed.

Working for me, thanks!