Use v-b-modal.modal-lg directive to open search modal

src/components/dashboard/Dashboard.vue

@@ -1187,8 +1187,6 @@ export default {
           );
           break;
       }
-
-      this.$bvModal?.show("modal-lg");
     },
     getDateString() {
       const date = new Date();

src/components/entity/EntityList.vue

@@ -723,6 +723,7 @@
                   <button
                     class="btn btn-primary btn-lg btn-edit"
                     type="button"
+                    v-b-modal.modal-lg
                     @click="onSearch('listing-collection')"
                   >
                     Search Collections
@@ -746,6 +747,7 @@
                   <button
                     class="btn btn-primary btn-lg btn-edit"
                     type="button"
+                    v-b-modal.modal-lg
                     @click="onSearch('listing-item')"
                   >
                     Search Items
@@ -1445,7 +1447,6 @@ export default {
     },
     onSearch(type) {
       this.searchType = type;
-      this.$bvModal?.show("modal-lg");
     },
     onSearchDone(records) {
       this.records = records && records.length ? records : this.masterRecords;

src/components/entity/ItemSearch.vue

@@ -14,7 +14,7 @@
                       <button
                         class="btn btn-primary btn-lg btn-edit float-right"
                         type="button"
-                        @click="onSearch()"
+                        v-b-modal.modal-lg
                       >
                         Search Item
                       </button>
@@ -68,11 +68,6 @@ export default {
     searchItems(searchWord) {
       this.refreshData(searchWord);
     },
-    
-    // pop up child component (the Search pop-up ialog)
-    onSearch() {
-      this.$bvModal?.show("modal-lg");
-    },
 
     // call item search API 
     async refreshData(searchWord = "") {
@@ -101,14 +96,6 @@ export default {
       }
     },
   },
-
-  updated() {
-    this.onSearch();
-  },
-  
-  mounted() {
-    this.onSearch();
-  },
 };
 </script>
 

src/components/shared/Search.vue

@@ -4,10 +4,11 @@
       size="lg"
       id="modal-lg"
       centered
+      ref="searchModal"
       @show="processModalData()"
       :no-close-on-backdrop="type === 'item-search'"
     >
-      <template #modal-header>
+      <template #header>
         <!-- Emulate built in modal header close button action -->
 
         <h5 class="text-capitalize" v-if="!isEntityList">
@@ -579,7 +580,7 @@
         </template>
       </template>
 
-      <template #modal-footer="{ ok, hide }">
+      <template #footer="{ ok, hide }">
         <!-- Emulate built in modal footer ok and cancel button actions -->
         <button
           v-if="type !== 'statuses' && type !== 'workflow-search'"
@@ -757,6 +758,10 @@ export default {
   mounted() {
     const self = this;
     self.fields = self.allSearchFields;
+    // Display search modal on page load for item-search page
+    if(this.searchType === 'item-search') {
+      this.$refs.searchModal.show();
+    }
   },
   methods: {
     async searchWfKeyUp(e) {

src/components/supplement/SupplementList.vue

@@ -31,6 +31,7 @@
                   <button
                     class="btn btn-primary btn-lg btn-edit"
                     type="button"
+                    v-b-modal.modal-lg
                     @click="onSearch('listing-supplement')"
                   >
                     Search Files
@@ -164,7 +165,6 @@ export default {
     },
     onSearch(type) {
       this.searchType = type;
-      this.$bvModal?.show("modal-lg");
     },
     onSearchDone(records) {
       this.records = records && records.length ? records : this.masterRecords;

src/components/workflow/WorkflowList.vue

@@ -7,9 +7,7 @@
           <button
             id="btn-search"
             class="ml-1 btn btn-primary btn-lg marg-b-4 float-right"
-            data-toggle="modal"
-            data-target=".bd-example-modal-lg-2"
-            @click="handleWorkflowSearch()"
+            v-b-modal.modal-lg
           >
             Search Workflows
           </button>
@@ -316,9 +314,6 @@ export default {
         self.listOfWorkflows[workflowIndex]
       );
     },
-    handleWorkflowSearch() {
-      this.$bvModal?.show("modal-lg");
-    },
     async handleWorkflowCreation() {
       const self = this;
       await self.workflowService