refactor: prevent bubbling

- update this.$set
- beforeDestroy -> beforeUnmount

src/components/Controls/Check.vue

@@ -54,7 +54,7 @@
           :class="inputClasses"
           :checked="value"
           :readonly="isReadOnly"
-          @change="(e) => triggerChange(+e.target.checked)"
+          @change.stop="(e) => triggerChange(+e.target.checked)"
           @focus="(e) => $emit('focus', e)"
         />
       </div>

src/components/Controls/Color.vue

@@ -44,7 +44,7 @@
               :placeholder="t('Custom Hex')"
               :class="inputClasses"
               :value="value"
-              @change="(e) => setColorValue(e.target.value)"
+              @change.stop="(e) => setColorValue(e.target.value)"
               class="bg-gray-100"
             />
           </div>

src/components/Controls/Link.vue

@@ -3,6 +3,7 @@ import frappe from 'frappe';
 import AutoComplete from './AutoComplete';
 import Badge from '@/components/Badge';
 import { openQuickEdit } from '@/utils';
+import { markRaw } from 'vue';
 
 export default {
   name: 'Link',
@@ -64,7 +65,7 @@ export default {
         label: 'Create',
         value: 'Create',
         action: () => this.openNewDoc(),
-        component: {
+        component: markRaw({
           template: `
                 <div class="flex items-center font-semibold">{{ t('Create') }}
                   <Badge color="blue" class="ml-2" v-if="isNewValue">{{ linkValue }}</Badge>
@@ -78,7 +79,7 @@ export default {
             },
           },
           components: { Badge },
-        },
+        }),
       };
     },
     async getFilters(keyword) {

src/components/Controls/Select.vue

@@ -20,7 +20,7 @@
           'text-gray-400': !value,
         }"
         :value="value"
-        @change="(e) => triggerChange(e.target.value)"
+        @change.stop="(e) => triggerChange(e.target.value)"
         @focus="(e) => $emit('focus', e)"
       >
         <option value="" disabled selected>

src/components/Controls/TableRow.vue

@@ -59,14 +59,14 @@ export default {
         return;
       }
 
-      this.$set(this.errors, df.fieldname, null);
+      this.errors[df.fieldname] = null;
       const oldValue = this.row.get(df.fieldname);
       if (oldValue === value) {
         return;
       }
 
       this.row.set(df.fieldname, value).catch((e) => {
-        this.$set(this.errors, df.fieldname, getErrorMessage(e, this.row));
+        this.errors[df.fieldname] = getErrorMessage(e, this.row);
       });
     },
     getErrorString() {

src/components/Popover.vue

@@ -70,7 +70,7 @@ export default {
       document.addEventListener('click', this.listener);
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.popper && this.popper.destroy();
     if (this.listener) {
       document.removeEventListener('click', this.listener);

src/components/TwoColumnForm.vue

@@ -167,7 +167,7 @@ let TwoColumnForm = {
 
       let oldValue = this.doc.get(df.fieldname);
 
-      this.$set(this.errors, df.fieldname, null);
+      this.errors[df.fieldname] = null;
       if (oldValue === value) {
         return;
       }
@@ -186,7 +186,7 @@ let TwoColumnForm = {
     onChangeCommon(df, value) {
       this.doc.set(df.fieldname, value).catch((e) => {
         // set error message for this field
-        this.$set(this.errors, df.fieldname, getErrorMessage(e, this.doc));
+        this.errors[df.fieldname] = getErrorMessage(e, this.doc);
       });
 
       if (this.autosave && this.doc._dirty && !this.doc.isNew()) {

src/components/WithScroll.vue

@@ -2,17 +2,20 @@
 export default {
   name: 'WithScroll',
   mounted() {
-    let handler = () => {
+    this.listener = () => {
       let { scrollLeft, scrollTop } = this.$el;
       this.$emit('scroll', { scrollLeft, scrollTop });
     };
-    this.$el.addEventListener('scroll', handler);
-    this.$once('hook:beforeDestroy', () => {
-      this.$el.removeEventListener('scroll', handler);
-    });
+    this.$el.addEventListener('scroll', this.listener);
+  },
+  beforeUnmount() {
+    if (this.listener) {
+      this.$el.removeEventListener('scroll', this.listener);
+      delete this.listener;
+    }
   },
   render() {
     return this.$slots.default[0];
-  }
+  },
 };
 </script>