From 3ea68a46cdc6f0103c66cee7ac3c511c4f33d901 Mon Sep 17 00:00:00 2001
From: Marcos Mariani <contact@mariani.dev>
Date: Wed, 7 Oct 2020 14:47:13 -0300
Subject: [PATCH] Fix for #726

*Bug:* Whenever the click of a VsButton happens it triggers a nextTick, but if the button does not exist anymore there will throw the error:
`Cannot read property 'clientWidth' of undefined`

*Fix: * Check if button reference still exists when nextTick happens.
---
 src/components/vsButton/vsButton.vue | 60 ++++++++++++++--------------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/src/components/vsButton/vsButton.vue b/src/components/vsButton/vsButton.vue
index 5dd780a4d..667907740 100644
--- a/src/components/vsButton/vsButton.vue
+++ b/src/components/vsButton/vsButton.vue
@@ -268,37 +268,39 @@ export default {
           this.isActive = true
         }
         let btn = this.$refs.btn
-        let xEvent = event.offsetX
-        let yEvent = event.offsetY
-        let radio = btn.clientWidth * 3
-        this.time  = btn.clientWidth / (btn.clientWidth + (this.is('border') || this.is('flat') ? 70 : 20))
-        if(this.is('filled')){
-          this.timeOpacity = this.time
-        }
-
-        if(event.srcElement ? event.srcElement != btn : false) {
-          xEvent += event.target.offsetLeft
-          yEvent += event.target.offsetTop
-        }
-        this.leftBackgorund = xEvent
-        this.topBackgorund = yEvent
-        this.radio = radio
-        if(this.is('filled')){
-          this.opacity = 0
-        } else {
-          this.opacity = 1
-        }
+        if (btn) {
+          let xEvent = event.offsetX
+          let yEvent = event.offsetY
+          let radio = btn.clientWidth * 3
+          this.time  = btn.clientWidth / (btn.clientWidth + (this.is('border') || this.is('flat') ? 70 : 20))
+          if(this.is('filled')){
+            this.timeOpacity = this.time
+          }
 
-        if(this.is('filled')){
-          setTimeout( () => {
-            this.time = this.timeOpacity = this.radio = 0
+          if(event.srcElement ? event.srcElement != btn : false) {
+            xEvent += event.target.offsetLeft
+            yEvent += event.target.offsetTop
+          }
+          this.leftBackgorund = xEvent
+          this.topBackgorund = yEvent
+          this.radio = radio
+          if(this.is('filled')){
+            this.opacity = 0
+          } else {
             this.opacity = 1
-            this.isActive = false
-          }, this.time * 1100)
-        } else {
-          setTimeout( () => {
-            this.timeOpacity = .15
-          }, this.time * 1100)
+          }
+
+          if(this.is('filled')){
+            setTimeout( () => {
+              this.time = this.timeOpacity = this.radio = 0
+              this.opacity = 1
+              this.isActive = false
+            }, this.time * 1100)
+          } else {
+            setTimeout( () => {
+              this.timeOpacity = .15
+            }, this.time * 1100)
+          }
         }
       });