diff --git a/app/components/Modal.vue b/app/components/Modal.vue
index 2fc3d20..00f7b3e 100644
--- a/app/components/Modal.vue
+++ b/app/components/Modal.vue
@@ -14,7 +14,7 @@
       <div
         class="modal-card"
         :style="{
-          width: $store.viewport <= 1 ? 'calc(100% - 2rem)' : width || '60%',
+          width: $store.viewport <= 1 ? 'calc(100% - 2rem)' : width,
         }"
       >
         <header
@@ -33,14 +33,25 @@
         </header>
         <section
           class="modal-card-body p-4"
-          :style="{ minHeight: height || '750px' }"
+          :style="{ minHeight: height }"
         >
-          <component
-            :is="resolvedComponent"
-            v-bind="vbind"
-            @modalevent="modalEvent"
-            @close="closeModal"
-          />
+          <Suspense>
+            <component
+              :is="resolvedComponent"
+              v-bind="vbind"
+              @modalevent="modalEvent"
+              @close="closeModal"
+            />
+            <template #fallback>
+              <div class="h-full is-flex is-justify-content-center is-align-items-center">
+                <Icon
+                  name="svg-spinners:180-ring-with-bg"
+                  :size="28"
+                  class="has-text-primary"
+                />
+              </div>
+            </template>
+          </Suspense>
         </section>
         <footer class="modal-card-foot px-4 pb-4 pt-0"></footer>
       </div>
@@ -56,8 +67,8 @@ const { $store } = useNuxtApp();
 
 const props = defineProps({
   component: String,
-  width: String,
-  height: String,
+  width: { type: String, default: "60%" },
+  height: { type: String, default: "750px" },
   vbind: Object,
   title: String,
 });
diff --git a/app/components/SearchBox.vue b/app/components/SearchBox.vue
index afca68b..012db5f 100644
--- a/app/components/SearchBox.vue
+++ b/app/components/SearchBox.vue
@@ -59,6 +59,7 @@
                   name: field,
                   fontsize: 14,
                   maxHeight: '200px',
+                  clearTrigger,
                 }"
                 @selected="choose"
               />
@@ -187,6 +188,7 @@ const pos = computed(() => {
       return "is-right";
   }
 });
+const clearTrigger = ref(0);
 
 if (props.vdata) {
   orgdata.value = props.vdata;
@@ -273,6 +275,7 @@ function doSelect(option) {
 function clearValue() {
   value.value = undefined;
   selected.value = undefined;
+  clearTrigger.value++;
   emit("option", null);
   emit("modalevent", { name: "option", data: null });
 }
diff --git a/app/components/datatable/ScrollBox.vue b/app/components/datatable/ScrollBox.vue
index c6a9339..25e0535 100644
--- a/app/components/datatable/ScrollBox.vue
+++ b/app/components/datatable/ScrollBox.vue
@@ -17,7 +17,7 @@
           <td>
             <span>{{ $stripHtml(v[name] || v.fullname || v.code || "n/a", 75) }}</span>
             <span
-              v-if="checked[i] && notick !== true"
+              v-if="checked[i] && !notick"
               class="icon right-3 has-background-inherit"
             >
               <Icon
@@ -183,6 +183,7 @@ const props = defineProps({
   show: Object,
   notick: Boolean,
   inContext: Boolean,
+  clearTrigger: Number,
 });
 
 const emit = defineEmits(["selected"]);
@@ -211,6 +212,13 @@ watch(
   { deep: true },
 );
 
+watch(
+  () => props.clearTrigger,
+  () => {
+    checked.value = {};
+  },
+);
+
 function getdata() {
   currentPage.value = 1;
   array.value = $copy(props.data);