src/components/common/VnSelect.vue

@@ -169,6 +169,7 @@ watch(modelValue, (newValue) => {
         ref="vnSelectRef"
         :class="{ required: $attrs.required }"
         :rules="$attrs.required ? [requiredFieldRule] : null"
+        virtual-scroll-slice-size="options.length"
     >
         <template v-if="isClearable" #append>
             <QIcon

src/pages/Claim/Card/ClaimBasicData.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-
+import VnSelect from 'src/components/common/VnSelect.vue';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
@@ -37,8 +37,6 @@ const claimFilter = {
     ],
 };
 
-const workers = ref([]);
-const workersCopy = ref([]);
 const claimStates = ref([]);
 const claimStatesCopy = ref([]);
 const optionsList = ref([]);
@@ -47,6 +45,7 @@ function setWorkers(data) {
     workers.value = data;
     workersCopy.value = data;
 }
+const workersOptions = ref([]);
 
 function setClaimStates(data) {
     claimStates.value = data;
@@ -68,25 +67,6 @@ async function getEnumValues() {
 
 getEnumValues();
 
-const workerFilter = {
-    options: workers,
-    filterFn: (options, value) => {
-        const search = value.toLowerCase();
-
-        if (value === '') return workersCopy.value;
-
-        return options.value.filter((row) => {
-            const id = row.id;
-            const name = row.name.toLowerCase();
-
-            const idMatches = id == search;
-            const nameMatches = name.indexOf(search) > -1;
-
-            return idMatches || nameMatches;
-        });
-    },
-};
-
 const statesFilter = {
     options: claimStates,
     filterFn: (options, value) => {
@@ -106,7 +86,7 @@ const statesFilter = {
     <FetchData
         url="Workers/activeWithInheritedRole"
         :filter="{ where: { role: 'salesPerson' } }"
-        @on-fetch="setWorkers"
+        @on-fetch="(data) => (workersOptions = data)"
         auto-load
     />
     <FetchData url="ClaimStates" @on-fetch="setClaimStates" auto-load />
@@ -135,18 +115,15 @@ const statesFilter = {
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <QSelect
+                    <VnSelect
+                        :label="t('claim.basicData.assignedTo')"
                         v-model="data.workerFk"
-                        :options="workers"
+                        :options="workersOptions"
                         option-value="id"
                         option-label="name"
                         emit-value
-                        :label="t('claim.basicData.assignedTo')"
-                        map-options
-                        use-input
-                        @filter="(value, update) => filter(value, update, workerFilter)"
+                        auto-load
                         :rules="validate('claim.claimStateFk')"
-                        :input-debounce="0"
                     >
                         <template #before>
                             <QAvatar color="orange">
@@ -157,7 +134,7 @@ const statesFilter = {
                                 />
                             </QAvatar>
                         </template>
-                    </QSelect>
+                    </VnSelect>
                 </div>
                 <div class="col">
                     <QSelect