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!

[felexkemboi]

Any way of solving this error without building custom components like your case?

[lk77]

it depends on your case, you could try the @click.native thing and see if that solve your issue,
you could use a v-show instead of a v-if or use $nextTick to delay the removal of the button after the clickButton function is executed.

[ricavalier]

I was having problems with the button to close the sidebar and switch screens, as well as giving this error on the button the second time, the sidebar would not close.
So I put a setTimeout on the router call of 500 milliseconds and I had no more problems.
I think this might be a solution for someone.
Hugs to all.