From 10b60c27a0d5c4621127b71d6ecede178caef0a6 Mon Sep 17 00:00:00 2001
From: vishesh92 <vishesh92@gmail.com>
Date: Wed, 5 Nov 2025 22:12:11 +0530
Subject: [PATCH 1/5] Use infinite scroll select

---
 ui/src/components/view/DedicateDomain.vue     | 130 ++++-----
 .../widgets/InfiniteScrollSelect.vue          |   1 +
 .../compute/wizard/OwnershipSelection.vue     | 271 +++++++-----------
 ui/src/views/iam/AddUser.vue                  | 127 ++++----
 ui/src/views/infra/UsageRecords.vue           | 110 +++----
 ui/src/views/storage/CreateTemplate.vue       | 110 +++----
 ui/src/views/storage/UploadLocalVolume.vue    | 221 ++++++--------
 ui/src/views/storage/UploadVolume.vue         | 218 ++++++--------
 ui/src/views/tools/CreateWebhook.vue          | 125 +++-----
 ui/src/views/tools/ManageVolumes.vue          | 154 ++++------
 10 files changed, 584 insertions(+), 883 deletions(-)

diff --git a/ui/src/components/view/DedicateDomain.vue b/ui/src/components/view/DedicateDomain.vue
index 0b3645ce4183..2e8221e8424a 100644
--- a/ui/src/components/view/DedicateDomain.vue
+++ b/ui/src/components/view/DedicateDomain.vue
@@ -18,52 +18,44 @@
 <template>
   <div class="form">
     <div class="form__item" :class="{'error': domainError}">
-      <a-spin :spinning="domainsLoading">
-        <p class="form__label">{{ $t('label.domain') }}<span class="required">*</span></p>
-        <p class="required required-label">{{ $t('label.required') }}</p>
-        <a-select
-          style="width: 100%"
-          showSearch
-          optionFilterProp="label"
-          :filterOption="(input, option) => {
-            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-          }"
-          @change="handleChangeDomain"
-          v-focus="true"
-          v-model:value="domainId">
-          <a-select-option
-            v-for="(domain, index) in domainsList"
-            :value="domain.id"
-            :key="index"
-            :label="domain.path || domain.name || domain.description">
-            {{ domain.path || domain.name || domain.description }}
-          </a-select-option>
-        </a-select>
-      </a-spin>
+      <p class="form__label">{{ $t('label.domain') }}<span class="required">*</span></p>
+      <p class="required required-label">{{ $t('label.required') }}</p>
+      <infinite-scroll-select
+        style="width: 100%"
+        v-model:value="domainId"
+        api="listDomains"
+        :apiParams="domainsApiParams"
+        resourceType="domain"
+        optionValueKey="id"
+        optionLabelKey="path"
+        defaultIcon="block-outlined"
+        v-focus="true"
+        @change-option-value="handleChangeDomain" />
     </div>
-    <div class="form__item" v-if="accountsList">
+    <div class="form__item">
       <p class="form__label">{{ $t('label.account') }}</p>
-      <a-select
+      <infinite-scroll-select
         style="width: 100%"
-        @change="handleChangeAccount"
-        showSearch
-        optionFilterProp="value"
-        :filterOption="(input, option) => {
-          return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
-        }" >
-        <a-select-option v-for="(account, index) in accountsList" :value="account.name" :key="index">
-          {{ account.name }}
-        </a-select-option>
-      </a-select>
+        v-model:value="selectedAccount"
+        api="listAccounts"
+        :apiParams="accountsApiParams"
+        resourceType="account"
+        optionValueKey="name"
+        optionLabelKey="name"
+        defaultIcon="team-outlined"
+        @change-option-value="handleChangeAccount" />
     </div>
   </div>
 </template>
 
 <script>
-import { api } from '@/api'
+import InfiniteScrollSelect from '@/components/widgets/InfiniteScrollSelect.vue'
 
 export default {
   name: 'DedicateDomain',
+  components: {
+    InfiniteScrollSelect
+  },
   props: {
     error: {
       type: Boolean,
@@ -72,59 +64,49 @@ export default {
   },
   data () {
     return {
-      domainsLoading: false,
       domainId: null,
-      accountsList: null,
-      domainsList: null,
+      selectedAccount: null,
       domainError: false
     }
   },
+  computed: {
+    domainsApiParams () {
+      return {
+        listall: true,
+        details: 'min'
+      }
+    },
+    accountsApiParams () {
+      if (!this.domainId) {
+        return {
+          listall: true,
+          showicon: true
+        }
+      }
+      return {
+        showicon: true,
+        domainid: this.domainId
+      }
+    }
+  },
   watch: {
     error () {
       this.domainError = this.error
     }
   },
   created () {
-    this.fetchData()
   },
   methods: {
-    fetchData () {
-      this.domainsLoading = true
-      api('listDomains', {
-        listAll: true,
-        details: 'min'
-      }).then(response => {
-        this.domainsList = response.listdomainsresponse.domain
-
-        if (this.domainsList[0]) {
-          this.domainId = this.domainsList[0].id
-          this.handleChangeDomain(this.domainId)
-        }
-      }).catch(error => {
-        this.$notifyError(error)
-      }).finally(() => {
-        this.domainsLoading = false
-      })
-    },
-    fetchAccounts () {
-      api('listAccounts', {
-        domainid: this.domainId
-      }).then(response => {
-        this.accountsList = response.listaccountsresponse.account || []
-        if (this.accountsList && this.accountsList.length === 0) {
-          this.handleChangeAccount(null)
-        }
-      }).catch(error => {
-        this.$notifyError(error)
-      })
-    },
-    handleChangeDomain (e) {
-      this.$emit('domainChange', e)
+    handleChangeDomain (domainId) {
+      this.domainId = domainId
+      this.selectedAccount = null
+      this.$emit('domainChange', domainId)
       this.domainError = false
-      this.fetchAccounts()
+      // InfiniteScrollSelect will auto-reload accounts when apiParams changes
     },
-    handleChangeAccount (e) {
-      this.$emit('accountChange', e)
+    handleChangeAccount (accountName) {
+      this.selectedAccount = accountName
+      this.$emit('accountChange', accountName)
     }
   }
 }
diff --git a/ui/src/components/widgets/InfiniteScrollSelect.vue b/ui/src/components/widgets/InfiniteScrollSelect.vue
index f97faf390f84..1cf5bd9e6368 100644
--- a/ui/src/components/widgets/InfiniteScrollSelect.vue
+++ b/ui/src/components/widgets/InfiniteScrollSelect.vue
@@ -58,6 +58,7 @@
     :filter-option="false"
     :loading="loading"
     show-search
+    allowClear
     placeholder="Select"
     @search="onSearchTimed"
     @popupScroll="onScroll"
diff --git a/ui/src/views/compute/wizard/OwnershipSelection.vue b/ui/src/views/compute/wizard/OwnershipSelection.vue
index a2c7ea4c1f8c..6a70d20a1dbd 100644
--- a/ui/src/views/compute/wizard/OwnershipSelection.vue
+++ b/ui/src/views/compute/wizard/OwnershipSelection.vue
@@ -19,7 +19,7 @@
   <a-form layout="vertical" >
     <a-form-item :label="$t('label.owner.type')">
       <a-select
-        @change="changeDomain"
+        @change="changeAccountType"
         v-model:value="selectedAccountType"
         defaultValue="account"
         autoFocus
@@ -36,114 +36,62 @@
       </a-select>
     </a-form-item>
     <a-form-item :label="$t('label.domain')" required>
-      <a-select
-        @change="changeDomain"
+      <infinite-scroll-select
         v-model:value="selectedDomain"
-        showSearch
-        optionFilterProp="label"
-        :filterOption="
-          (input, option) => {
-            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-          }
-        "
-      >
-        <a-select-option
-          v-for="domain in domains"
-          :key="domain.name"
-          :value="domain.id"
-          :label="domain.path || domain.name || domain.description"
-        >
-          <span>
-            <resource-icon
-              v-if="domain && domain.icon"
-              :image="domain.icon.base64image"
-              size="1x"
-              style="margin-right: 5px"
-            />
-            <block-outlined v-else />
-            {{ domain.path || domain.name || domain.description }}
-          </span>
-        </a-select-option>
-      </a-select>
+        api="listDomains"
+        :apiParams="domainsApiParams"
+        resourceType="domain"
+        optionValueKey="id"
+        optionLabelKey="path"
+        defaultIcon="block-outlined"
+        @change-option-value="handleDomainChange" />
     </a-form-item>
 
     <template v-if="selectedAccountType === 'Account'">
       <a-form-item :label="$t('label.account')" required>
-        <a-select
-          @change="emitChangeEvent"
+        <infinite-scroll-select
           v-model:value="selectedAccount"
-          showSearch
-          optionFilterProp="label"
-          :filterOption="
-            (input, option) => {
-              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }
-          "
-        >
-          <a-select-option v-for="account in accounts" :key="account.name" :value="account.name">
-            <span>
-              <resource-icon
-                v-if="account && account.icon"
-                :image="account.icon.base64image"
-                size="1x"
-                style="margin-right: 5px"
-              />
-              <team-outlined v-else />
-              {{ account.name }}
-            </span>
-          </a-select-option>
-        </a-select>
+          api="listAccounts"
+          :apiParams="accountsApiParams"
+          resourceType="account"
+          optionValueKey="name"
+          optionLabelKey="name"
+          defaultIcon="team-outlined"
+          @change-option-value="handleAccountChange" />
       </a-form-item>
     </template>
 
     <template v-else>
       <a-form-item :label="$t('label.project')" required>
-        <a-select
-          @change="emitChangeEvent"
+        <infinite-scroll-select
           v-model:value="selectedProject"
-          showSearch
-          optionFilterProp="label"
-          :filterOption="
-            (input, option) => {
-              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }
-          "
-        >
-          <a-select-option v-for="project in projects" :key="project.id" :value="project.id" :label="project.name">
-            <span>
-              <resource-icon
-                v-if="project && project.icon"
-                :image="project.icon.base64image"
-                size="1x"
-                style="margin-right: 5px"
-              />
-              <project-outlined v-else />
-              {{ project.name }}
-            </span>
-          </a-select-option>
-        </a-select>
+          api="listProjects"
+          :apiParams="projectsApiParams"
+          resourceType="project"
+          optionValueKey="id"
+          optionLabelKey="name"
+          defaultIcon="project-outlined"
+          @change-option-value="handleProjectChange" />
       </a-form-item>
     </template>
   </a-form>
 </template>
 
 <script>
-import { api } from '@/api'
-import ResourceIcon from '@/components/view/ResourceIcon.vue'
+import InfiniteScrollSelect from '@/components/widgets/InfiniteScrollSelect.vue'
 
 export default {
   name: 'OwnershipSelection',
-  components: { ResourceIcon },
+  components: { InfiniteScrollSelect },
   data () {
     return {
-      domains: [],
-      accounts: [],
-      projects: [],
       selectedAccountType: this.$store.getters.project?.id ? 'Project' : 'Account',
       selectedDomain: null,
       selectedAccount: null,
       selectedProject: null,
-      loading: false
+      selectedDomainOption: null,
+      selectedAccountOption: null,
+      selectedProjectOption: null
     }
   },
   props: {
@@ -151,103 +99,98 @@ export default {
       type: Object
     }
   },
-  created () {
-    this.fetchData()
-  },
-  methods: {
-    fetchData () {
-      this.loading = true
-      api('listDomains', {
-        response: 'json',
+  computed: {
+    domainsApiParams () {
+      return {
         listAll: true,
         showicon: true,
         details: 'min'
-      })
-        .then((response) => {
-          this.domains = response.listdomainsresponse.domain
-          if (this.override) {
-            this.domains = this.domains.filter(item => this.override.domains.has(item.id))
-          }
-          if (this.domains.length === 0) {
-            this.selectedDomain = null
-            this.selectedProject = null
-            this.selectedAccount = null
-            return
-          }
-          const domainIds = this.domains?.map(domain => domain.id)
-          const ownerDomainId = this.$store.getters.project?.domainid || this.$store.getters.userInfo.domainid
-          this.selectedDomain = domainIds?.includes(ownerDomainId) ? ownerDomainId : this.domains?.[0]?.id
-          this.changeDomain()
-        })
-        .catch((error) => {
-          this.$notifyError(error)
-        })
-        .finally(() => {
-          this.loading = false
-        })
+      }
     },
-    fetchAccounts () {
-      this.loading = true
-      api('listAccounts', {
-        response: 'json',
-        domainId: this.selectedDomain,
+    accountsApiParams () {
+      if (!this.selectedDomain) {
+        return null
+      }
+      return {
+        domainid: this.selectedDomain,
         showicon: true,
         state: 'Enabled',
         isrecursive: false
-      })
-        .then((response) => {
-          this.accounts = response.listaccountsresponse.account || []
-          if (this.override?.accounts && this.accounts) {
-            this.accounts = this.accounts.filter(item => this.override.accounts.has(item.name))
-          }
-          const accountNames = this.accounts.map(account => account.name)
-          if (this.selectedDomain === this.$store.getters.userInfo.domainid && accountNames.includes(this.$store.getters.userInfo.account)) {
-            this.selectedAccount = this.$store.getters.userInfo.account
-          } else {
-            this.selectedAccount = this.accounts?.[0]?.name
-          }
-          this.selectedProject = null
-          this.emitChangeEvent()
-        })
-        .catch((error) => {
-          this.$notifyError(error)
-        })
-        .finally(() => {
-          this.loading = false
-        })
+      }
     },
-    fetchProjects () {
-      this.loading = true
-      api('listProjects', {
-        response: 'json',
+    projectsApiParams () {
+      if (!this.selectedDomain) {
+        return null
+      }
+      return {
         domainId: this.selectedDomain,
         state: 'Active',
         showicon: true,
         details: 'min',
         isrecursive: false
-      })
-        .then((response) => {
-          this.projects = response.listprojectsresponse.project
-          if (this.override?.projects && this.projects) {
-            this.projects = this.projects.filter(item => this.override.projects.has(item.id))
-          }
-          this.selectedProject = this.projects?.map(project => project.id)?.includes(this.$store.getters.project?.id) ? this.$store.getters.project?.id : this.projects?.[0]?.id
-          this.selectedAccount = null
-          this.emitChangeEvent()
-        })
-        .catch((error) => {
-          this.$notifyError(error)
-        })
-        .finally(() => {
-          this.loading = false
-        })
+      }
+    }
+  },
+  created () {
+    // Set initial domain selection
+    const ownerDomainId = this.$store.getters.project?.domainid || this.$store.getters.userInfo.domainid
+    if (ownerDomainId) {
+      this.selectedDomain = ownerDomainId
+    }
+  },
+  methods: {
+    changeAccountType () {
+      // Reset account/project selection when switching types
+      this.selectedAccount = null
+      this.selectedProject = null
+
+      // Trigger initial selection based on type
+      this.handleDomainChange(this.selectedDomain)
     },
-    changeDomain () {
-      if (this.selectedAccountType === 'Account') {
-        this.fetchAccounts()
-      } else {
-        this.fetchProjects()
+    handleDomainChange (domainId) {
+      this.selectedDomain = domainId
+      // Reset child selections
+      this.selectedAccount = null
+      this.selectedProject = null
+
+      // Pre-select account if it's the user's domain
+      if (this.selectedAccountType === 'Account' &&
+          this.selectedDomain === this.$store.getters.userInfo.domainid) {
+        this.selectedAccount = this.$store.getters.userInfo.account
+      } else if (this.selectedAccountType === 'Project' &&
+               this.$store.getters.project?.id &&
+               this.selectedDomain === this.$store.getters.project?.domainid) {
+        // Pre-select project if applicable
+        this.selectedProject = this.$store.getters.project?.id
       }
+
+      this.emitChangeEvent()
+    },
+    handleDomainOptionChange (option) {
+      this.selectedDomainOption = option
+      // Note: Override filtering is not implemented in InfiniteScrollSelect migration
+      // If override.domains filtering is needed, it should be handled at a higher level
+      // or by using a custom filtering mechanism
+    },
+    handleAccountChange (accountName) {
+      this.selectedAccount = accountName
+      this.selectedProject = null
+      this.emitChangeEvent()
+    },
+    handleAccountOptionChange (option) {
+      this.selectedAccountOption = option
+      // Note: Override filtering is not implemented in InfiniteScrollSelect migration
+      // If override.accounts filtering is needed, it should be handled at a higher level
+    },
+    handleProjectChange (projectId) {
+      this.selectedProject = projectId
+      this.selectedAccount = null
+      this.emitChangeEvent()
+    },
+    handleProjectOptionChange (option) {
+      this.selectedProjectOption = option
+      // Note: Override filtering is not implemented in InfiniteScrollSelect migration
+      // If override.projects filtering is needed, it should be handled at a higher level
     },
     emitChangeEvent () {
       this.$emit('fetch-owner', this)
diff --git a/ui/src/views/iam/AddUser.vue b/ui/src/views/iam/AddUser.vue
index 49bca3278965..9366e1c8251b 100644
--- a/ui/src/views/iam/AddUser.vue
+++ b/ui/src/views/iam/AddUser.vue
@@ -90,45 +90,30 @@
           <template #label>
             <tooltip-label :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
           </template>
-          <a-select
-            :loading="domainLoading"
+          <infinite-scroll-select
             v-model:value="form.domainid"
+            api="listDomains"
+            :apiParams="domainsApiParams"
+            resourceType="domain"
+            optionValueKey="id"
+            optionLabelKey="path"
+            defaultIcon="block-outlined"
             :placeholder="apiParams.domainid.description"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return  option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }" >
-            <a-select-option v-for="domain in domainsList" :key="domain.id" :label="domain.path || domain.name || domain.description">
-              <span>
-                <resource-icon v-if="domain && domain.icon" :image="domain.icon.base64image" size="1x" style="margin-right: 5px"/>
-                <block-outlined v-else style="margin-right: 5px" />
-                {{ domain.path || domain.name || domain.description }}
-              </span>
-            </a-select-option>
-          </a-select>
+            @change-option-value="handleDomainChange" />
         </a-form-item>
         <a-form-item name="account" ref="account" v-if="!account">
           <template #label>
             <tooltip-label :title="$t('label.account')" :tooltip="apiParams.account.description"/>
           </template>
-          <a-select
+          <infinite-scroll-select
             v-model:value="form.account"
-            :loading="loadingAccount"
-            :placeholder="apiParams.account.description"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return  option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }" >
-            <a-select-option v-for="(item, idx) in accountList" :key="idx" :label="item.name">
-              <span>
-                <resource-icon v-if="item && item.icon" :image="item.icon.base64image" size="1x" style="margin-right: 5px"/>
-                <team-outlined v-else style="margin-right: 5px" />
-                {{ item.name }}
-              </span>
-            </a-select-option>
-          </a-select>
+            api="listAccounts"
+            :apiParams="accountsApiParams"
+            resourceType="account"
+            optionValueKey="name"
+            optionLabelKey="name"
+            defaultIcon="team-outlined"
+            :placeholder="apiParams.account.description" />
         </a-form-item>
         <a-form-item name="timezone" ref="timezone">
           <template #label>
@@ -185,12 +170,14 @@ import { timeZone } from '@/utils/timezone'
 import debounce from 'lodash/debounce'
 import ResourceIcon from '@/components/view/ResourceIcon'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
+import InfiniteScrollSelect from '@/components/widgets/InfiniteScrollSelect.vue'
 
 export default {
   name: 'AddUser',
   components: {
     TooltipLabel,
-    ResourceIcon
+    ResourceIcon,
+    InfiniteScrollSelect
   },
   data () {
     this.fetchTimeZone = debounce(this.fetchTimeZone, 800)
@@ -198,14 +185,9 @@ export default {
       loading: false,
       timeZoneLoading: false,
       timeZoneMap: [],
-      domainLoading: false,
-      domainsList: [],
-      selectedDomain: '',
       samlEnable: false,
       idpLoading: false,
       idps: [],
-      loadingAccount: false,
-      accountList: [],
       account: null,
       domainid: null
     }
@@ -218,6 +200,25 @@ export default {
   computed: {
     samlAllowed () {
       return 'authorizeSamlSso' in this.$store.getters.apis
+    },
+    domainsApiParams () {
+      return {
+        listall: true,
+        showicon: true,
+        details: 'min'
+      }
+    },
+    accountsApiParams () {
+      if (!this.form.domainid) {
+        return {
+          showicon: true,
+          listall: true
+        }
+      }
+      return {
+        showicon: true,
+        domainid: this.form.domainid
+      }
     }
   },
   methods: {
@@ -241,53 +242,19 @@ export default {
     fetchData () {
       this.account = this.$route.query && this.$route.query.account ? this.$route.query.account : null
       this.domainid = this.$route.query && this.$route.query.domainid ? this.$route.query.domainid : null
-      if (!this.domianid) {
-        this.fetchDomains()
+      // Set initial domain if provided from route
+      if (this.domainid) {
+        this.form.domainid = this.domainid
       }
       this.fetchTimeZone()
       if (this.samlAllowed) {
         this.fetchIdps()
       }
     },
-    fetchDomains () {
-      this.domainLoading = true
-      var params = {
-        listAll: true,
-        showicon: true,
-        details: 'min'
-      }
-      api('listDomains', params).then(response => {
-        this.domainsList = response.listdomainsresponse.domain || []
-      }).catch(error => {
-        this.$notification.error({
-          message: `${this.$t('label.error')} ${error.response.status}`,
-          description: error.response.data.errorresponse.errortext
-        })
-      }).finally(() => {
-        const domainid = this.domainsList[0]?.id || ''
-        this.form.domainid = domainid
-        this.fetchAccount(domainid)
-        this.domainLoading = false
-      })
-    },
-    fetchAccount (domainid) {
-      this.accountList = []
+    handleDomainChange (domainId) {
+      this.form.domainid = domainId
       this.form.account = null
-      this.loadingAccount = true
-      var params = { listAll: true, showicon: true }
-      if (domainid) {
-        params.domainid = domainid
-      }
-      api('listAccounts', params).then(response => {
-        this.accountList = response.listaccountsresponse.account || []
-      }).catch(error => {
-        this.$notification.error({
-          message: `${this.$t('label.error')} ${error.response.status}`,
-          description: error.response.data.errorresponse.errortext
-        })
-      }).finally(() => {
-        this.loadingAccount = false
-      })
+      // InfiniteScrollSelect will auto-reload accounts when apiParams changes
     },
     fetchTimeZone (value) {
       this.timeZoneMap = []
@@ -328,12 +295,14 @@ export default {
           accounttype: 0
         }
 
+        // Account: use route query account if available, otherwise use form value (which is the account name)
         if (this.account) {
           params.account = this.account
-        } else if (this.accountList[values.account]) {
-          params.account = this.accountList[values.account].name
+        } else if (values.account) {
+          params.account = values.account
         }
 
+        // Domain: use route query domainid if available, otherwise use form value
         if (this.domainid) {
           params.domainid = this.domainid
         } else if (values.domainid) {
diff --git a/ui/src/views/infra/UsageRecords.vue b/ui/src/views/infra/UsageRecords.vue
index feb1d88bd9b6..e862f32be6dd 100644
--- a/ui/src/views/infra/UsageRecords.vue
+++ b/ui/src/views/infra/UsageRecords.vue
@@ -121,15 +121,18 @@
                   ref="domain"
                   name="domain"
                 >
-                  <a-auto-complete
+                  <infinite-scroll-select
                     v-model:value="form.domain"
-                    :options="domains"
+                    api="listDomains"
+                    :apiParams="domainsApiParams"
+                    resourceType="domain"
+                    optionValueKey="id"
+                    optionLabelKey="path"
+                    defaultIcon="block-outlined"
                     :placeholder="$t('label.domain')"
-                    :filter-option="filterOption"
                     style="width: 100%;"
-                    @select="getAccounts"
-                    :dropdownMatchSelectWidth="false"
-                  />
+                    @change-option-value="handleDomainChange"
+                    @change-option="handleDomainOptionChange" />
                 </a-form-item>
               </a-col>
             </a-row>&nbsp;
@@ -150,15 +153,18 @@
               ref="account"
               name="account"
             >
-            <a-auto-complete
+              <infinite-scroll-select
                 v-model:value="form.account"
-                :options="accounts"
+                api="listAccounts"
+                :apiParams="accountsApiParams"
+                resourceType="account"
+                optionValueKey="id"
+                optionLabelKey="name"
+                defaultIcon="team-outlined"
                 :placeholder="$t('label.account')"
-                :filter-option="filterOption"
                 :disabled="form.isRecursive"
-                :dropdownMatchSelectWidth="false"
-                @select="selectAccount"
-              />
+                @change-option-value="selectAccount"
+                @change-option="selectAccountOption" />
             </a-form-item>
           </a-col>
           <a-col :span="3" v-if="'listUsageTypes' in $store.getters.apis">
@@ -361,6 +367,7 @@ import ListView from '@/components/view/ListView'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 import TooltipButton from '@/components/widgets/TooltipButton'
 import Status from '@/components/widgets/Status'
+import InfiniteScrollSelect from '@/components/widgets/InfiniteScrollSelect.vue'
 
 dayjs.extend(relativeTime)
 dayjs.extend(utc)
@@ -374,7 +381,8 @@ export default {
     ListView,
     Status,
     TooltipLabel,
-    TooltipButton
+    TooltipButton,
+    InfiniteScrollSelect
   },
   props: {
     resource: {
@@ -402,8 +410,6 @@ export default {
       page: 1,
       pageSize: 20,
       usageTypes: [],
-      domains: [],
-      accounts: [],
       account: null,
       domain: null,
       usageType: null,
@@ -436,6 +442,24 @@ export default {
     this.fetchData()
     this.updateColumns()
   },
+  computed: {
+    domainsApiParams () {
+      return {
+        listall: true
+      }
+    },
+    accountsApiParams () {
+      if (!this.form.domain) {
+        return {
+          listall: true
+        }
+      }
+      return {
+        listall: true,
+        domainid: this.form.domain
+      }
+    }
+  },
   methods: {
     clearFilters () {
       this.formRef.value.resetFields()
@@ -445,8 +469,6 @@ export default {
       this.usageType = null
       this.page = 1
       this.pageSize = 20
-
-      this.getAccounts()
     },
     disabledDate (current) {
       return current && current > dayjs().endOf('day')
@@ -473,8 +495,6 @@ export default {
       this.listUsageServerMetrics()
       this.getUsageTypes()
       this.getAllUsageRecordColumns()
-      this.getDomains()
-      this.getAccounts()
       if (!this.$store.getters.customColumns[this.$store.getters.userInfo.id]) {
         this.$store.getters.customColumns[this.$store.getters.userInfo.id] = {}
         this.$store.getters.customColumns[this.$store.getters.userInfo.id][this.$route.path] = this.selectedColumnKeys
@@ -528,16 +548,6 @@ export default {
         this.formRef.value.scrollToField(error.errorFields[0].name)
       })
     },
-    selectAccount (value, option) {
-      if (option && option.id) {
-        this.account = option
-      } else {
-        this.account = null
-        if (this.formRef?.value) {
-          this.formRef.value.resetFields('account')
-        }
-      }
-    },
     selectUsageType (value, option) {
       if (option && option.id) {
         this.usageType = option
@@ -548,24 +558,13 @@ export default {
         }
       }
     },
-    getDomains () {
-      api('listDomains', { listAll: true }).then(json => {
-        if (json && json.listdomainsresponse && json.listdomainsresponse.domain) {
-          this.domains = [{ id: null, value: '' }, ...json.listdomainsresponse.domain.map(x => {
-            return {
-              id: x.id,
-              value: x.path
-            }
-          })]
-        }
-      })
+    handleDomainChange (domainId) {
+      this.form.domain = domainId
+      this.form.account = null
+      // InfiniteScrollSelect will auto-reload accounts when apiParams changes
     },
-    getAccounts (value, option) {
-      var params = {
-        listAll: true
-      }
+    handleDomainOptionChange (option) {
       if (option && option.id) {
-        params.domainid = option.id
         this.domain = option
       } else {
         this.domain = null
@@ -573,16 +572,19 @@ export default {
           this.formRef.value.resetFields('domain')
         }
       }
-      api('listAccounts', params).then(json => {
-        if (json && json.listaccountsresponse && json.listaccountsresponse.account) {
-          this.accounts = [{ id: null, value: '' }, ...json.listaccountsresponse.account.map(x => {
-            return {
-              id: x.id,
-              value: x.name
-            }
-          })]
+    },
+    selectAccount (accountId) {
+      this.form.account = accountId
+    },
+    selectAccountOption (option) {
+      if (option && option.id) {
+        this.account = option
+      } else {
+        this.account = null
+        if (this.formRef?.value) {
+          this.formRef.value.resetFields('account')
         }
-      })
+      }
     },
     getParams (page, pageSize) {
       const formRaw = toRaw(this.form)
diff --git a/ui/src/views/storage/CreateTemplate.vue b/ui/src/views/storage/CreateTemplate.vue
index d974092a5f8c..00985affafcb 100644
--- a/ui/src/views/storage/CreateTemplate.vue
+++ b/ui/src/views/storage/CreateTemplate.vue
@@ -73,42 +73,30 @@
           <template #label>
             <tooltip-label :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
           </template>
-          <a-select
+          <infinite-scroll-select
             v-model:value="form.domainid"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }"
-            :loading="domainLoading"
+            api="listDomains"
+            :apiParams="domainsApiParams"
+            resourceType="domain"
+            optionValueKey="id"
+            optionLabelKey="path"
+            defaultIcon="block-outlined"
             :placeholder="apiParams.domainid.description"
-            @change="val => { handleDomainChange(val) }">
-            <a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex" :label="opt.path || opt.name || opt.description" :value="opt.id">
-              <span>
-                <resource-icon v-if="opt && opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
-                <block-outlined v-else style="margin-right: 5px" />
-                {{ opt.path || opt.name || opt.description }}
-              </span>
-            </a-select-option>
-          </a-select>
+            @change-option-value="handleDomainChange" />
         </a-form-item>
         <a-form-item name="account" ref="account" v-if="domainid">
           <template #label>
             <tooltip-label :title="$t('label.account')" :tooltip="apiParams.account.description"/>
           </template>
-          <a-select
+          <infinite-scroll-select
             v-model:value="form.account"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }"
-            :placeholder="apiParams.account.description"
-            @change="val => { handleAccountChange(val) }">
-            <a-select-option v-for="(acc, index) in accounts" :value="acc.name" :key="index">
-              {{ acc.name }}
-            </a-select-option>
-          </a-select>
+            api="listAccounts"
+            :apiParams="accountsApiParams"
+            resourceType="account"
+            optionValueKey="name"
+            optionLabelKey="name"
+            defaultIcon="team-outlined"
+            :placeholder="apiParams.account.description" />
         </a-form-item>
 
       <a-form-item
@@ -199,13 +187,15 @@ import { api } from '@/api'
 import { mixinForm } from '@/utils/mixin'
 import ResourceIcon from '@/components/view/ResourceIcon'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
+import InfiniteScrollSelect from '@/components/widgets/InfiniteScrollSelect.vue'
 
 export default {
   name: 'CreateTemplate',
   mixins: [mixinForm],
   components: {
     ResourceIcon,
-    TooltipLabel
+    TooltipLabel,
+    InfiniteScrollSelect
   },
   props: {
     resource: {
@@ -219,9 +209,6 @@ export default {
       zones: [],
       osTypes: {},
       loading: false,
-      domains: [],
-      accounts: [],
-      domainLoading: false,
       domainid: null,
       account: null,
       architectureTypes: {}
@@ -230,6 +217,21 @@ export default {
   computed: {
     isAdminRole () {
       return this.$store.getters.userInfo.roletype === 'Admin'
+    },
+    domainsApiParams () {
+      return {
+        listall: true,
+        showicon: true,
+        details: 'min'
+      }
+    },
+    accountsApiParams () {
+      if (!this.domainid) {
+        return null
+      }
+      return {
+        domainid: this.domainid
+      }
     }
   },
   beforeCreate () {
@@ -256,9 +258,6 @@ export default {
       if (this.resource.intervaltype) {
         this.fetchSnapshotZones()
       }
-      if ('listDomains' in this.$store.getters.apis) {
-        this.fetchDomains()
-      }
       this.architectureTypes.opts = this.$fetchCpuArchitectureTypes()
     },
     fetchOsTypes () {
@@ -309,44 +308,17 @@ export default {
         }
       })
     },
-    fetchDomains () {
-      const params = {}
-      params.listAll = true
-      params.showicon = true
-      params.details = 'min'
-      this.domainLoading = true
-      api('listDomains', params).then(json => {
-        this.domains = json.listdomainsresponse.domain
-      }).finally(() => {
-        this.domainLoading = false
-        this.handleDomainChange(null)
-      })
-    },
-    async handleDomainChange (domain) {
-      this.domainid = domain
+    handleDomainChange (domainId) {
+      this.domainid = domainId
       this.form.account = null
       this.account = null
-      if ('listAccounts' in this.$store.getters.apis) {
-        await this.fetchAccounts()
-      }
-    },
-    fetchAccounts () {
-      return new Promise((resolve, reject) => {
-        api('listAccounts', {
-          domainid: this.domainid
-        }).then(response => {
-          this.accounts = response?.listaccountsresponse?.account || []
-          resolve(this.accounts)
-        }).catch(error => {
-          this.$notifyError(error)
-        })
-      })
+      // InfiniteScrollSelect will auto-reload accounts when apiParams changes
     },
-    handleAccountChange (acc) {
-      if (acc) {
-        this.account = acc.name
+    handleAccountChange (accountName) {
+      if (accountName) {
+        this.account = accountName
       } else {
-        this.account = acc
+        this.account = null
       }
     },
     handleSubmit (e) {
diff --git a/ui/src/views/storage/UploadLocalVolume.vue b/ui/src/views/storage/UploadLocalVolume.vue
index 75775c9010a8..2388cb6b1b7b 100644
--- a/ui/src/views/storage/UploadLocalVolume.vue
+++ b/ui/src/views/storage/UploadLocalVolume.vue
@@ -57,43 +57,30 @@
           <template #label>
             <tooltip-label :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
           </template>
-          <a-select
+          <infinite-scroll-select
             v-model:value="form.zoneId"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }" >
-            <a-select-option :value="zone.id" v-for="zone in zones" :key="zone.id" :label="zone.name || zone.description">
-              <span>
-                <resource-icon v-if="zone.icon" :image="zone.icon.base64image" size="1x" style="margin-right: 5px"/>
-                <global-outlined v-else style="margin-right: 5px"/>
-                {{ zone.name || zone.description }}
-              </span>
-            </a-select-option>
-          </a-select>
+            api="listZones"
+            :apiParams="zonesApiParams"
+            resourceType="zone"
+            optionValueKey="id"
+            optionLabelKey="name"
+            defaultIcon="global-outlined"
+            @change-option-value="handleZoneChange" />
         </a-form-item>
         <a-form-item name="diskofferingid" ref="diskofferingid">
           <template #label>
             <tooltip-label :title="$t('label.diskofferingid')" :tooltip="apiParams.diskofferingid.description"/>
           </template>
-          <a-select
+          <infinite-scroll-select
             v-model:value="form.diskofferingid"
-            :loading="offeringLoading"
+            api="listDiskOfferings"
+            :apiParams="diskOfferingsApiParams"
+            resourceType="diskoffering"
+            optionValueKey="id"
+            optionLabelKey="displaytext"
+            defaultIcon="hdd-outlined"
             :placeholder="apiParams.diskofferingid.description"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }" >
-            <a-select-option
-              v-for="(offering, index) in offerings"
-              :value="offering.id"
-              :key="index"
-              :label="offering.displaytext || offering.name">
-              {{ offering.displaytext || offering.name }}
-            </a-select-option>
-          </a-select>
+            @change-option="onChangeDiskOffering" />
         </a-form-item>
         <a-form-item ref="format" name="format">
           <template #label>
@@ -124,38 +111,31 @@
           <template #label>
             <tooltip-label :title="$t('label.domain')" :tooltip="apiParams.domainid.description"/>
           </template>
-          <a-select
+          <infinite-scroll-select
             v-model:value="form.domainid"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }"
-            :loading="domainLoading"
+            api="listDomains"
+            :apiParams="domainsApiParams"
+            resourceType="domain"
+            optionValueKey="id"
+            optionLabelKey="path"
+            defaultIcon="block-outlined"
             :placeholder="$t('label.domainid')"
-            @change="val => { handleDomainChange(domainList[val].id) }">
-            <a-select-option v-for="(opt, optIndex) in domainList" :key="optIndex" :label="opt.path || opt.name || opt.description">
-              {{ opt.path || opt.name || opt.description }}
-            </a-select-option>
-          </a-select>
+            @change-option-value="handleDomainChange" />
         </a-form-item>
         <a-form-item name="account" ref="account" v-if="'listDomains' in $store.getters.apis">
           <template #label>
             <tooltip-label :title="$t('label.account')" :tooltip="apiParams.account.description"/>
           </template>
-          <a-select
+          <infinite-scroll-select
             v-model:value="form.account"
-            showSearch
-            optionFilterProp="value"
-            :filterOption="(input, option) => {
-              return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }"
+            api="listAccounts"
+            :apiParams="accountsApiParams"
+            resourceType="account"
+            optionValueKey="name"
+            optionLabelKey="name"
+            defaultIcon="team-outlined"
             :placeholder="$t('label.account')"
-            @change="val => { handleAccountChange(val) }">
-            <a-select-option v-for="(acc, index) in accountList" :value="acc.name" :key="index">
-              {{ acc.name }}
-            </a-select-option>
-          </a-select>
+            @change-option-value="handleAccountChange" />
         </a-form-item>
         <div :span="24" class="action-button">
           <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
@@ -173,27 +153,25 @@ import { axios } from '../../utils/request'
 import { mixinForm } from '@/utils/mixin'
 import ResourceIcon from '@/components/view/ResourceIcon'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
+import InfiniteScrollSelect from '@/components/widgets/InfiniteScrollSelect.vue'
 
 export default {
   name: 'UploadLocalVolume',
   mixins: [mixinForm],
   components: {
     ResourceIcon,
-    TooltipLabel
+    TooltipLabel,
+    InfiniteScrollSelect
   },
   data () {
     return {
       fileList: [],
-      zones: [],
-      domainList: [],
-      accountList: [],
-      offerings: [],
-      offeringLoading: false,
       formats: ['RAW', 'VHD', 'VHDX', 'OVA', 'QCOW2'],
       domainId: null,
       account: null,
       uploadParams: null,
-      domainLoading: false,
+      customDiskOffering: false,
+      isCustomizedDiskIOps: false,
       loading: false,
       uploadPercentage: 0
     }
@@ -201,9 +179,38 @@ export default {
   beforeCreate () {
     this.apiParams = this.$getApiParams('getUploadParamsForVolume')
   },
+  computed: {
+    zonesApiParams () {
+      return {
+        showicon: true
+      }
+    },
+    diskOfferingsApiParams () {
+      if (!this.form.zoneId) {
+        return null
+      }
+      return {
+        zoneid: this.form.zoneId,
+        listall: true
+      }
+    },
+    domainsApiParams () {
+      return {
+        listall: true,
+        details: 'min'
+      }
+    },
+    accountsApiParams () {
+      if (!this.form.domainid) {
+        return null
+      }
+      return {
+        domainid: this.form.domainid
+      }
+    }
+  },
   created () {
     this.initForm()
-    this.fetchData()
   },
   methods: {
     initForm () {
@@ -221,38 +228,18 @@ export default {
         zoneId: [{ required: true, message: this.$t('message.error.select') }]
       })
     },
-    listZones () {
-      api('listZones', { showicon: true }).then(json => {
-        if (json && json.listzonesresponse && json.listzonesresponse.zone) {
-          this.zones = json.listzonesresponse.zone
-          this.zones = this.zones.filter(zone => zone.type !== 'Edge')
-          if (this.zones.length > 0) {
-            this.onZoneChange(this.zones[0].id)
-          }
-        }
-      })
-    },
-    onZoneChange (zoneId) {
+    handleZoneChange (zoneId) {
       this.form.zoneId = zoneId
-      this.zoneId = zoneId
-      this.fetchDiskOfferings(zoneId)
+      // InfiniteScrollSelect will auto-reload disk offerings when apiParams changes
     },
-    fetchDiskOfferings (zoneId) {
-      this.offeringLoading = true
-      this.offerings = [{ id: -1, name: '' }]
-      this.form.diskofferingid = undefined
-      api('listDiskOfferings', {
-        zoneid: zoneId,
-        listall: true
-      }).then(json => {
-        for (var offering of json.listdiskofferingsresponse.diskoffering) {
-          if (offering.iscustomized) {
-            this.offerings.push(offering)
-          }
-        }
-      }).finally(() => {
-        this.offeringLoading = false
-      })
+    onChangeDiskOffering (offering) {
+      if (offering) {
+        this.customDiskOffering = offering.iscustomized || false
+        this.isCustomizedDiskIOps = offering.iscustomizediops || false
+      } else {
+        this.customDiskOffering = false
+        this.isCustomizedDiskIOps = false
+      }
     },
     handleRemove (file) {
       const index = this.fileList.indexOf(file)
@@ -266,53 +253,15 @@ export default {
       this.form.file = file
       return false
     },
-    handleDomainChange (domain) {
-      this.domainId = domain
-      if ('listAccounts' in this.$store.getters.apis) {
-        this.fetchAccounts()
-      }
-    },
-    handleAccountChange (acc) {
-      if (acc) {
-        this.account = acc.name
-      } else {
-        this.account = acc
-      }
-    },
-    fetchData () {
-      this.listZones()
-      if ('listDomains' in this.$store.getters.apis) {
-        this.fetchDomains()
-      }
+    handleDomainChange (domainId) {
+      this.form.domainid = domainId
+      this.domainId = domainId
+      this.form.account = null
+      // InfiniteScrollSelect will auto-reload accounts when apiParams changes
     },
-    fetchDomains () {
-      this.domainLoading = true
-      api('listDomains', {
-        listAll: true,
-        details: 'min'
-      }).then(response => {
-        this.domainList = response.listdomainsresponse.domain
-
-        if (this.domainList[0]) {
-          this.handleDomainChange(null)
-        }
-      }).catch(error => {
-        this.$notifyError(error)
-      }).finally(() => {
-        this.domainLoading = false
-      })
-    },
-    fetchAccounts () {
-      api('listAccounts', {
-        domainid: this.domainId
-      }).then(response => {
-        this.accountList = response.listaccountsresponse.account || []
-        if (this.accountList && this.accountList.length === 0) {
-          this.handleAccountChange(null)
-        }
-      }).catch(error => {
-        this.$notifyError(error)
-      })
+    handleAccountChange (accountName) {
+      this.form.account = accountName
+      this.account = accountName
     },
     handleSubmit (e) {
       e.preventDefault()
diff --git a/ui/src/views/storage/UploadVolume.vue b/ui/src/views/storage/UploadVolume.vue
index 937c3ad76aa5..e81143270303 100644
--- a/ui/src/views/storage/UploadVolume.vue
+++ b/ui/src/views/storage/UploadVolume.vue
@@ -47,21 +47,15 @@
           <template #label>
             <tooltip-label :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
           </template>
-          <a-select
+          <infinite-scroll-select
             v-model:value="form.zoneId"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }" >
-            <a-select-option :value="zone.id" v-for="zone in zones" :key="zone.id" :label="zone.name || zone.description">
-              <span>
-                <resource-icon v-if="zone.icon" :image="zone.icon.base64image" size="1x" style="margin-right: 5px"/>
-                <global-outlined v-else style="margin-right: 5px"/>
-                {{ zone.name || zone.description }}
-              </span>
-            </a-select-option>
-          </a-select>
+            api="listZones"
+            :apiParams="zonesApiParams"
+            resourceType="zone"
+            optionValueKey="id"
+            optionLabelKey="name"
+            defaultIcon="global-outlined"
+            @change-option-value="handleZoneChange" />
         </a-form-item>
         <a-form-item name="format" ref="format">
           <template #label>
@@ -83,23 +77,15 @@
           <template #label>
             <tooltip-label :title="$t('label.diskofferingid')" :tooltip="apiParams.diskofferingid.description || $t('label.diskoffering')"/>
           </template>
-          <a-select
+          <infinite-scroll-select
             v-model:value="form.diskofferingid"
-            :loading="loading"
-            @change="id => onChangeDiskOffering(id)"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }" >
-            <a-select-option
-              v-for="(offering, index) in offerings"
-              :value="offering.id"
-              :key="index"
-              :label="offering.displaytext || offering.name">
-              {{ offering.displaytext || offering.name }}
-            </a-select-option>
-          </a-select>
+            api="listDiskOfferings"
+            :apiParams="diskOfferingsApiParams"
+            resourceType="diskoffering"
+            optionValueKey="id"
+            optionLabelKey="displaytext"
+            defaultIcon="hdd-outlined"
+            @change-option="onChangeDiskOffering" />
         </a-form-item>
         <a-form-item name="checksum" ref="checksum">
           <template #label>
@@ -114,38 +100,31 @@
           <template #label>
             <tooltip-label :title="$t('label.domain')" :tooltip="apiParams.domainid.description"/>
           </template>
-          <a-select
+          <infinite-scroll-select
             v-model:value="form.domainid"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }"
-            :loading="domainLoading"
+            api="listDomains"
+            :apiParams="domainsApiParams"
+            resourceType="domain"
+            optionValueKey="id"
+            optionLabelKey="path"
+            defaultIcon="block-outlined"
             :placeholder="$t('label.domainid')"
-            @change="val => { handleDomainChange(domainList[val].id) }">
-            <a-select-option v-for="(opt, optIndex) in domainList" :key="optIndex" :label="opt.path || opt.name || opt.description">
-              {{ opt.path || opt.name || opt.description }}
-            </a-select-option>
-          </a-select>
+            @change-option-value="handleDomainChange" />
         </a-form-item>
         <a-form-item name="account" ref="account" v-if="'listDomains' in $store.getters.apis">
           <template #label>
             <tooltip-label :title="$t('label.account')" :tooltip="apiParams.account.description"/>
           </template>
-          <a-select
+          <infinite-scroll-select
             v-model:value="form.account"
-            showSearch
-            optionFilterProp="value"
-            :filterOption="(input, option) => {
-              return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }"
+            api="listAccounts"
+            :apiParams="accountsApiParams"
+            resourceType="account"
+            optionValueKey="name"
+            optionLabelKey="name"
+            defaultIcon="team-outlined"
             :placeholder="$t('label.account')"
-            @change="val => { handleAccountChange(val) }">
-            <a-select-option v-for="(acc, index) in accountList" :value="acc.name" :key="index">
-              {{ acc.name }}
-            </a-select-option>
-          </a-select>
+            @change-option-value="handleAccountChange" />
         </a-form-item>
         <div :span="24" class="action-button">
           <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
@@ -162,27 +141,26 @@ import { api } from '@/api'
 import { mixinForm } from '@/utils/mixin'
 import ResourceIcon from '@/components/view/ResourceIcon'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
+import InfiniteScrollSelect from '@/components/widgets/InfiniteScrollSelect.vue'
 
 export default {
   name: 'UploadVolume',
   mixins: [mixinForm],
   components: {
     ResourceIcon,
-    TooltipLabel
+    TooltipLabel,
+    InfiniteScrollSelect
   },
   data () {
     return {
-      zones: [],
-      domainList: [],
-      accountList: [],
       formats: ['RAW', 'VHD', 'VHDX', 'OVA', 'QCOW2'],
-      offerings: [],
       zoneSelected: '',
       selectedDiskOfferingId: null,
       domainId: null,
       account: null,
       uploadParams: null,
-      domainLoading: false,
+      customDiskOffering: false,
+      isCustomizedDiskIOps: false,
       loading: false,
       uploadPercentage: 0
     }
@@ -190,9 +168,42 @@ export default {
   beforeCreate () {
     this.apiParams = this.$getApiParams('uploadVolume')
   },
+  computed: {
+    zonesApiParams () {
+      return {
+        showicon: true
+      }
+    },
+    diskOfferingsApiParams () {
+      if (!this.form.zoneId) {
+        return null
+      }
+      return {
+        zoneid: this.form.zoneId,
+        listall: true
+      }
+    },
+    domainsApiParams () {
+      return {
+        listall: true,
+        details: 'min'
+      }
+    },
+    accountsApiParams () {
+      if (!this.form.domainid) {
+        return {
+          listall: true,
+          showicon: true
+        }
+      }
+      return {
+        domainid: this.form.domainid,
+        showicon: true
+      }
+    }
+  },
   created () {
     this.initForm()
-    this.fetchData()
   },
   methods: {
     initForm () {
@@ -207,78 +218,29 @@ export default {
         format: [{ required: true, message: this.$t('message.error.select') }]
       })
     },
-    fetchData () {
-      this.loading = true
-      api('listZones', { showicon: true }).then(json => {
-        this.zones = json.listzonesresponse.zone || []
-        this.zones = this.zones.filter(zone => zone.type !== 'Edge')
-        this.form.zoneId = this.zones[0].id || ''
-        this.fetchDiskOfferings(this.form.zoneId)
-      }).finally(() => {
-        this.loading = false
-      })
-      if ('listDomains' in this.$store.getters.apis) {
-        this.fetchDomains()
-      }
-    },
-    fetchDiskOfferings (zoneId) {
-      this.loading = true
-      api('listDiskOfferings', {
-        zoneid: zoneId,
-        listall: true
-      }).then(json => {
-        this.offerings = json.listdiskofferingsresponse.diskoffering || []
-      }).finally(() => {
-        this.loading = false
-      })
-    },
-    fetchDomains () {
-      this.domainLoading = true
-      api('listDomains', {
-        listAll: true,
-        details: 'min'
-      }).then(response => {
-        this.domainList = response.listdomainsresponse.domain
-
-        if (this.domainList[0]) {
-          this.handleDomainChange(null)
-        }
-      }).catch(error => {
-        this.$notifyError(error)
-      }).finally(() => {
-        this.domainLoading = false
-      })
-    },
-    fetchAccounts () {
-      api('listAccounts', {
-        domainid: this.domainId
-      }).then(response => {
-        this.accountList = response.listaccountsresponse.account || []
-        if (this.accountList && this.accountList.length === 0) {
-          this.handleAccountChange(null)
-        }
-      }).catch(error => {
-        this.$notifyError(error)
-      })
+    handleZoneChange (zoneId) {
+      this.form.zoneId = zoneId
+      // InfiniteScrollSelect will auto-reload disk offerings when apiParams changes
     },
-    onChangeDiskOffering (id) {
-      const offering = this.offerings.filter(x => x.id === id)
-      this.customDiskOffering = offering[0]?.iscustomized || false
-      this.isCustomizedDiskIOps = offering[0]?.iscustomizediops || false
-    },
-    handleDomainChange (domain) {
-      this.domainId = domain
-      if ('listAccounts' in this.$store.getters.apis) {
-        this.fetchAccounts()
-      }
-    },
-    handleAccountChange (acc) {
-      if (acc) {
-        this.account = acc.name
+    onChangeDiskOffering (offering) {
+      if (offering) {
+        this.customDiskOffering = offering.iscustomized || false
+        this.isCustomizedDiskIOps = offering.iscustomizediops || false
       } else {
-        this.account = acc
+        this.customDiskOffering = false
+        this.isCustomizedDiskIOps = false
       }
     },
+    handleDomainChange (domainId) {
+      this.form.domainid = domainId
+      this.domainId = domainId
+      this.form.account = null
+      // InfiniteScrollSelect will auto-reload accounts when apiParams changes
+    },
+    handleAccountChange (accountName) {
+      this.form.account = accountName
+      this.account = accountName
+    },
     handleSubmit (e) {
       e.preventDefault()
       if (this.loading) return
diff --git a/ui/src/views/tools/CreateWebhook.vue b/ui/src/views/tools/CreateWebhook.vue
index 7d687c7d983e..92de0401883c 100644
--- a/ui/src/views/tools/CreateWebhook.vue
+++ b/ui/src/views/tools/CreateWebhook.vue
@@ -67,39 +67,31 @@
               <info-circle-outlined style="color: rgba(0,0,0,.45)" />
             </a-tooltip>
           </template>
-          <a-select
+          <infinite-scroll-select
             id="domain-selection"
             v-model:value="form.domainid"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }"
-            :loading="domainLoading"
+            api="listDomains"
+            :apiParams="domainsApiParams"
+            resourceType="domain"
+            optionValueKey="id"
+            optionLabelKey="path"
+            defaultIcon="block-outlined"
             :placeholder="apiParams.domainid.description"
-            @change="val => { handleDomainChanged(val) }">
-            <a-select-option v-for="opt in domains" :key="opt.id" :label="opt.path || opt.name || opt.description || ''">
-              {{ opt.path || opt.name || opt.description }}
-            </a-select-option>
-          </a-select>
+            @change-option-value="handleDomainChanged" />
         </a-form-item>
         <a-form-item name="account" ref="account" v-if="isAdminOrDomainAdmin && ['Local'].includes(form.scope) && form.domainid">
           <template #label>
             <tooltip-label :title="$t('label.account')" :tooltip="apiParams.account.description"/>
           </template>
-          <a-select
+          <infinite-scroll-select
             v-model:value="form.account"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }"
-            :loading="accountLoading"
-            :placeholder="apiParams.account.description">
-            <a-select-option v-for="opt in accounts" :key="opt.id" :label="opt.name">
-              {{ opt.name }}
-            </a-select-option>
-          </a-select>
+            api="listAccounts"
+            :apiParams="accountsApiParams"
+            resourceType="account"
+            optionValueKey="name"
+            optionLabelKey="name"
+            defaultIcon="team-outlined"
+            :placeholder="apiParams.account.description" />
         </a-form-item>
         <a-form-item name="payloadurl" ref="payloadurl">
           <template #label>
@@ -156,25 +148,22 @@
 <script>
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
-import _ from 'lodash'
 import { mixinForm } from '@/utils/mixin'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 import TestWebhookDeliveryView from '@/components/view/TestWebhookDeliveryView'
+import InfiniteScrollSelect from '@/components/widgets/InfiniteScrollSelect.vue'
 
 export default {
   name: 'CreateWebhook',
   mixins: [mixinForm],
   components: {
     TooltipLabel,
-    TestWebhookDeliveryView
+    TestWebhookDeliveryView,
+    InfiniteScrollSelect
   },
   props: {},
   data () {
     return {
-      domains: [],
-      domainLoading: false,
-      accounts: [],
-      accountLoading: false,
       loading: false,
       testDeliveryAllowed: false,
       testDeliveryLoading: false
@@ -185,9 +174,6 @@ export default {
   },
   created () {
     this.initForm()
-    if (['Domain', 'Local'].includes(this.form.scope)) {
-      this.fetchDomainData()
-    }
   },
   computed: {
     isAdminOrDomainAdmin () {
@@ -201,6 +187,21 @@ export default {
         return this.form.payloadurl.toLowerCase().startsWith('https://')
       }
       return false
+    },
+    domainsApiParams () {
+      return {
+        listAll: true,
+        showicon: true,
+        details: 'min'
+      }
+    },
+    accountsApiParams () {
+      if (!this.form.domainid) {
+        return null
+      }
+      return {
+        domainid: this.form.domainid
+      }
     }
   },
   methods: {
@@ -228,46 +229,6 @@ export default {
     updateTestDeliveryLoading (value) {
       this.testDeliveryLoading = value
     },
-    fetchDomainData () {
-      this.domainLoading = true
-      this.domains = [
-        {
-          id: null,
-          name: ''
-        }
-      ]
-      this.form.domainid = null
-      this.form.account = null
-      api('listDomains', {}).then(json => {
-        const listdomains = json.listdomainsresponse.domain
-        this.domains = this.domains.concat(listdomains)
-      }).finally(() => {
-        this.domainLoading = false
-        if (this.arrayHasItems(this.domains)) {
-          this.form.domainid = null
-        }
-      })
-    },
-    fetchAccountData () {
-      this.accounts = []
-      this.form.account = null
-      if (!this.form.domainid) {
-        return
-      }
-      this.accountLoading = true
-      var params = {
-        domainid: this.form.domainid
-      }
-      api('listAccounts', params).then(json => {
-        const listAccounts = json.listaccountsresponse.account || []
-        this.accounts = listAccounts
-      }).finally(() => {
-        this.accountLoading = false
-        if (this.arrayHasItems(this.accounts)) {
-          this.form.account = this.accounts[0].id
-        }
-      })
-    },
     handleSubmit (e) {
       e.preventDefault()
       if (this.loading) return
@@ -300,10 +261,8 @@ export default {
           return
         }
         if (values.account) {
-          const accountItem = _.find(this.accounts, (option) => option.id === values.account)
-          if (accountItem) {
-            params.account = accountItem.name
-          }
+          // values.account is the account name (optionValueKey="name")
+          params.account = values.account
         }
         this.loading = true
         api('createWebhook', params).then(json => {
@@ -331,14 +290,14 @@ export default {
       }, 1)
     },
     handleScopeChange (e) {
-      if (['Domain', 'Local'].includes(this.form.scope)) {
-        this.fetchDomainData()
-      }
+      // Reset domain and account when scope changes
+      this.form.domainid = null
+      this.form.account = null
     },
     handleDomainChanged (domainid) {
-      if (domainid) {
-        this.fetchAccountData()
-      }
+      // Reset account when domain changes
+      this.form.account = null
+      // InfiniteScrollSelect will auto-reload accounts when apiParams changes
     }
   }
 }
diff --git a/ui/src/views/tools/ManageVolumes.vue b/ui/src/views/tools/ManageVolumes.vue
index 94c06b4ce9c4..915e30106029 100644
--- a/ui/src/views/tools/ManageVolumes.vue
+++ b/ui/src/views/tools/ManageVolumes.vue
@@ -372,22 +372,15 @@
               name="domain"
               ref="domain"
               :label="$t('label.domain')">
-              <a-select
-                @change="changeDomain"
+              <infinite-scroll-select
                 v-model:value="importForm.selectedDomain"
-                showSearch
-                optionFilterProp="label"
-                :filterOption="(input, option) => {
-                  return  option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-                }" >
-                <a-select-option v-for="domain in domains" :key="domain.name" :value="domain.id" :label="domain.path || domain.name || domain.description">
-                <span>
-                  <resource-icon v-if="domain && domain.icon" :image="domain.icon.base64image" size="1x" style="margin-right: 5px"/>
-                  <block-outlined v-else style="margin-right: 5px" />
-                  {{ domain.path || domain.name || domain.description }}
-                </span>
-                </a-select-option>
-              </a-select>
+                api="listDomains"
+                :apiParams="domainsApiParams"
+                resourceType="domain"
+                optionValueKey="id"
+                optionLabelKey="path"
+                defaultIcon="block-outlined"
+                @change-option-value="changeDomain" />
             </a-form-item>
 
             <a-form-item
@@ -395,22 +388,15 @@
               name="account"
               ref="account"
               :label="$t('label.account')">
-              <a-select
-                @change="changeAccount"
+              <infinite-scroll-select
                 v-model:value="importForm.selectedAccount"
-                showSearch
-                optionFilterProp="value"
-                :filterOption="(input, option) => {
-                    return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
-                  }" >
-                <a-select-option v-for="account in accounts" :key="account.name" :value="account.name">
-                  <span>
-                    <resource-icon v-if="account && account.icon" :image="account.icon.base64image" size="1x" style="margin-right: 5px"/>
-                    <team-outlined v-else style="margin-right: 5px" />
-                    {{ account.name }}
-                  </span>
-                </a-select-option>
-              </a-select>
+                api="listAccounts"
+                :apiParams="accountsApiParams"
+                resourceType="account"
+                optionValueKey="name"
+                optionLabelKey="name"
+                defaultIcon="team-outlined"
+                @change-option-value="changeAccount" />
               <span v-if="importForm.accountError" class="required">{{ $t('label.required') }}</span>
             </a-form-item>
 
@@ -419,22 +405,15 @@
               name="project"
               ref="project"
               :label="$t('label.project')">
-              <a-select
-                @change="changeProject"
+              <infinite-scroll-select
                 v-model:value="importForm.selectedProject"
-                showSearch
-                optionFilterProp="label"
-                :filterOption="(input, option) => {
-                  return  option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-                }" >
-                <a-select-option v-for="project in projects" :key="project.id" :value="project.id" :label="project.name">
-                <span>
-                  <resource-icon v-if="project && project.icon" :image="project.icon.base64image" size="1x" style="margin-right: 5px"/>
-                  <project-outlined v-else style="margin-right: 5px" />
-                  {{ project.name }}
-                </span>
-                </a-select-option>
-              </a-select>
+                api="listProjects"
+                :apiParams="projectsApiParams"
+                resourceType="project"
+                optionValueKey="id"
+                optionLabelKey="name"
+                defaultIcon="project-outlined"
+                @change-option-value="changeProject" />
               <span v-if="importForm.projectError" class="required">{{ $t('label.required') }}</span>
             </a-form-item>
 
@@ -480,6 +459,7 @@ import Status from '@/components/widgets/Status'
 import SearchView from '@/components/view/SearchView'
 import ResourceIcon from '@/components/view/ResourceIcon'
 import TooltipLabel from '@/components/widgets/TooltipLabel.vue'
+import InfiniteScrollSelect from '@/components/widgets/InfiniteScrollSelect.vue'
 
 export default {
   components: {
@@ -487,7 +467,8 @@ export default {
     Breadcrumb,
     Status,
     SearchView,
-    ResourceIcon
+    ResourceIcon,
+    InfiniteScrollSelect
   },
   name: 'ManageVolumes',
   data () {
@@ -607,7 +588,6 @@ export default {
     this.page.managed = parseInt(this.$route.query.managedpage || 1)
     this.initForm()
     this.fetchData()
-    this.fetchDomains()
   },
   computed: {
     isPageAllowed () {
@@ -629,6 +609,36 @@ export default {
     showCluster () {
       return this.poolscope !== 'zone'
     },
+    domainsApiParams () {
+      return {
+        listall: true,
+        details: 'min',
+        showicon: true
+      }
+    },
+    accountsApiParams () {
+      if (!this.importForm.selectedDomain) {
+        return null
+      }
+      return {
+        domainid: this.importForm.selectedDomain,
+        showicon: true,
+        state: 'Enabled',
+        isrecursive: false
+      }
+    },
+    projectsApiParams () {
+      if (!this.importForm.selectedDomain) {
+        return null
+      }
+      return {
+        domainid: this.importForm.selectedDomain,
+        state: 'Active',
+        showicon: true,
+        details: 'min',
+        isrecursive: false
+      }
+    },
     showHost () {
       return this.poolscope === 'host'
     },
@@ -970,53 +980,6 @@ export default {
       this.updateQuery('scope', value)
       this.fetchOptions(this.params.zones, 'zones', value)
     },
-    fetchDomains () {
-      api('listDomains', {
-        response: 'json',
-        listAll: true,
-        showicon: true,
-        details: 'min'
-      }).then(response => {
-        this.domains = response.listdomainsresponse.domain || []
-      }).catch(error => {
-        this.$notifyError(error)
-      }).finally(() => {
-        this.loading = false
-      })
-    },
-    fetchAccounts () {
-      this.loading = true
-      api('listAccounts', {
-        response: 'json',
-        domainId: this.importForm.selectedDomain,
-        showicon: true,
-        state: 'Enabled',
-        isrecursive: false
-      }).then(response => {
-        this.accounts = response.listaccountsresponse.account || []
-      }).catch(error => {
-        this.$notifyError(error)
-      }).finally(() => {
-        this.loading = false
-      })
-    },
-    fetchProjects () {
-      this.loading = true
-      api('listProjects', {
-        response: 'json',
-        domainId: this.importForm.selectedDomain,
-        state: 'Active',
-        showicon: true,
-        details: 'min',
-        isrecursive: false
-      }).then(response => {
-        this.projects = response.listprojectsresponse.project || []
-      }).catch(error => {
-        this.$notifyError(error)
-      }).finally(() => {
-        this.loading = false
-      })
-    },
     changeAccountType () {
       this.importForm.selectedDomain = null
       this.importForm.selectedAccount = null
@@ -1029,8 +992,7 @@ export default {
       this.importForm.selectedProject = null
       this.importForm.selectedDiskoffering = null
       this.diskOfferings = {}
-      this.fetchAccounts()
-      this.fetchProjects()
+      // InfiniteScrollSelect will auto-reload when apiParams changes
     },
     changeAccount () {
       this.importForm.selectedProject = null

From c7d282cd2e46d06b2c61f9b9798116dc312ecf30 Mon Sep 17 00:00:00 2001
From: vishesh92 <vishesh92@gmail.com>
Date: Fri, 7 Nov 2025 14:00:32 +0530
Subject: [PATCH 2/5] Address comments

---
 .../widgets/InfiniteScrollSelect.vue          | 48 +++++++++++++++++--
 .../compute/wizard/OwnershipSelection.vue     | 16 -------
 ui/src/views/iam/AddUser.vue                  |  9 +---
 ui/src/views/infra/UsageRecords.vue           |  5 +-
 ui/src/views/storage/CreateTemplate.vue       |  2 +
 ui/src/views/storage/UploadLocalVolume.vue    |  5 ++
 ui/src/views/storage/UploadVolume.vue         | 13 +++--
 ui/src/views/tools/CreateWebhook.vue          |  2 +
 ui/src/views/tools/ManageVolumes.vue          |  3 ++
 9 files changed, 69 insertions(+), 34 deletions(-)

diff --git a/ui/src/components/widgets/InfiniteScrollSelect.vue b/ui/src/components/widgets/InfiniteScrollSelect.vue
index 1cf5bd9e6368..023330d41161 100644
--- a/ui/src/components/widgets/InfiniteScrollSelect.vue
+++ b/ui/src/components/widgets/InfiniteScrollSelect.vue
@@ -41,8 +41,10 @@
   - optionValueKey (String, optional): Property to use as the value for options (e.g., 'name'). Default is 'id'
   - optionLabelKey (String, optional): Property to use as the label for options (e.g., 'name'). Default is 'name'
   - defaultOption (Object, optional): Preselected object to include initially
+  - allowClear (Boolean, optional): Whether to allow clearing the selection. Default is false
   - showIcon (Boolean, optional): Whether to show icon for the options. Default is true
   - defaultIcon (String, optional): Icon to be shown when there is no resource icon for the option. Default is 'cloud-outlined'
+  - selectFirstOption (Boolean, optional): Whether to automatically select the first option when options are loaded. Default is false
 
   Events:
   - @change-option-value (Function): Emits the selected option value(s) when value(s) changes. Do not use @change as it will give warnings and may not work
@@ -58,7 +60,7 @@
     :filter-option="false"
     :loading="loading"
     show-search
-    allowClear
+    :allowClear="allowClear"
     placeholder="Select"
     @search="onSearchTimed"
     @popupScroll="onScroll"
@@ -78,7 +80,7 @@
     </template>
     <a-select-option v-for="option in options" :key="option.id" :value="option[optionValueKey]">
       <span>
-        <span v-if="showIcon">
+        <span v-if="showIcon && option.id !== null && option.id !== undefined">
           <resource-icon v-if="option.icon && option.icon.base64image" :image="option.icon.base64image" size="1x" style="margin-right: 5px"/>
           <render-icon v-else :icon="defaultIcon" style="margin-right: 5px" />
         </span>
@@ -125,6 +127,10 @@ export default {
       type: Object,
       default: null
     },
+    allowClear: {
+      type: Boolean,
+      default: false
+    },
     showIcon: {
       type: Boolean,
       default: true
@@ -136,6 +142,10 @@ export default {
     pageSize: {
       type: Number,
       default: null
+    },
+    selectFirstOption: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -148,7 +158,8 @@ export default {
       searchTimer: null,
       scrollHandlerAttached: false,
       preselectedOptionValue: null,
-      successiveFetches: 0
+      successiveFetches: 0,
+      hasAutoSelectedFirst: false
     }
   },
   created () {
@@ -211,6 +222,7 @@ export default {
       }).finally(() => {
         if (this.successiveFetches === 0) {
           this.loading = false
+          this.autoSelectFirstOptionIfNeeded()
         }
       })
     },
@@ -247,6 +259,36 @@ export default {
       this.preselectedOptionValue = null
       this.successiveFetches = 0
     },
+    autoSelectFirstOptionIfNeeded () {
+      if (!this.selectFirstOption || this.hasAutoSelectedFirst) {
+        return
+      }
+      // Don't auto-select if there's a preselected value being fetched
+      if (this.preselectedOptionValue) {
+        return
+      }
+      const currentValue = this.$attrs.value
+      if (currentValue !== undefined && currentValue !== null && currentValue !== '') {
+        return
+      }
+      if (this.options.length === 0) {
+        return
+      }
+      if (this.searchQuery && this.searchQuery.length > 0) {
+        return
+      }
+      // Only auto-select after initial load is complete (no more successive fetches)
+      if (this.successiveFetches > 0) {
+        return
+      }
+      const firstOption = this.options[0]
+      if (firstOption) {
+        const firstValue = firstOption[this.optionValueKey]
+        this.hasAutoSelectedFirst = true
+        this.$emit('change-option-value', firstValue)
+        this.$emit('change-option', firstOption)
+      }
+    },
     onSearchTimed (value) {
       clearTimeout(this.searchTimer)
       this.searchTimer = setTimeout(() => {
diff --git a/ui/src/views/compute/wizard/OwnershipSelection.vue b/ui/src/views/compute/wizard/OwnershipSelection.vue
index 6a70d20a1dbd..abf93beb2510 100644
--- a/ui/src/views/compute/wizard/OwnershipSelection.vue
+++ b/ui/src/views/compute/wizard/OwnershipSelection.vue
@@ -166,32 +166,16 @@ export default {
 
       this.emitChangeEvent()
     },
-    handleDomainOptionChange (option) {
-      this.selectedDomainOption = option
-      // Note: Override filtering is not implemented in InfiniteScrollSelect migration
-      // If override.domains filtering is needed, it should be handled at a higher level
-      // or by using a custom filtering mechanism
-    },
     handleAccountChange (accountName) {
       this.selectedAccount = accountName
       this.selectedProject = null
       this.emitChangeEvent()
     },
-    handleAccountOptionChange (option) {
-      this.selectedAccountOption = option
-      // Note: Override filtering is not implemented in InfiniteScrollSelect migration
-      // If override.accounts filtering is needed, it should be handled at a higher level
-    },
     handleProjectChange (projectId) {
       this.selectedProject = projectId
       this.selectedAccount = null
       this.emitChangeEvent()
     },
-    handleProjectOptionChange (option) {
-      this.selectedProjectOption = option
-      // Note: Override filtering is not implemented in InfiniteScrollSelect migration
-      // If override.projects filtering is needed, it should be handled at a higher level
-    },
     emitChangeEvent () {
       this.$emit('fetch-owner', this)
     }
diff --git a/ui/src/views/iam/AddUser.vue b/ui/src/views/iam/AddUser.vue
index 9366e1c8251b..74770061ed9a 100644
--- a/ui/src/views/iam/AddUser.vue
+++ b/ui/src/views/iam/AddUser.vue
@@ -98,6 +98,7 @@
             optionValueKey="id"
             optionLabelKey="path"
             defaultIcon="block-outlined"
+            :selectFirstOption="true"
             :placeholder="apiParams.domainid.description"
             @change-option-value="handleDomainChange" />
         </a-form-item>
@@ -209,15 +210,9 @@ export default {
       }
     },
     accountsApiParams () {
-      if (!this.form.domainid) {
-        return {
-          showicon: true,
-          listall: true
-        }
-      }
       return {
         showicon: true,
-        domainid: this.form.domainid
+        domainid: this.form?.domainid || null
       }
     }
   },
diff --git a/ui/src/views/infra/UsageRecords.vue b/ui/src/views/infra/UsageRecords.vue
index e862f32be6dd..a5fe3cf85c50 100644
--- a/ui/src/views/infra/UsageRecords.vue
+++ b/ui/src/views/infra/UsageRecords.vue
@@ -130,6 +130,8 @@
                     optionLabelKey="path"
                     defaultIcon="block-outlined"
                     :placeholder="$t('label.domain')"
+                    :defaultOption="{ id: null, path: ''}"
+                    :allowClear="true"
                     style="width: 100%;"
                     @change-option-value="handleDomainChange"
                     @change-option="handleDomainOptionChange" />
@@ -163,6 +165,8 @@
                 defaultIcon="team-outlined"
                 :placeholder="$t('label.account')"
                 :disabled="form.isRecursive"
+                :defaultOption="{ id: null, name: ''}"
+                allowClear="true"
                 @change-option-value="selectAccount"
                 @change-option="selectAccountOption" />
             </a-form-item>
@@ -455,7 +459,6 @@ export default {
         }
       }
       return {
-        listall: true,
         domainid: this.form.domain
       }
     }
diff --git a/ui/src/views/storage/CreateTemplate.vue b/ui/src/views/storage/CreateTemplate.vue
index 00985affafcb..e885d82404cc 100644
--- a/ui/src/views/storage/CreateTemplate.vue
+++ b/ui/src/views/storage/CreateTemplate.vue
@@ -81,6 +81,7 @@
             optionValueKey="id"
             optionLabelKey="path"
             defaultIcon="block-outlined"
+            allowClear="true"
             :placeholder="apiParams.domainid.description"
             @change-option-value="handleDomainChange" />
         </a-form-item>
@@ -96,6 +97,7 @@
             optionValueKey="name"
             optionLabelKey="name"
             defaultIcon="team-outlined"
+            allowClear="true"
             :placeholder="apiParams.account.description" />
         </a-form-item>
 
diff --git a/ui/src/views/storage/UploadLocalVolume.vue b/ui/src/views/storage/UploadLocalVolume.vue
index 2388cb6b1b7b..8abc17bfd92d 100644
--- a/ui/src/views/storage/UploadLocalVolume.vue
+++ b/ui/src/views/storage/UploadLocalVolume.vue
@@ -65,6 +65,7 @@
             optionValueKey="id"
             optionLabelKey="name"
             defaultIcon="global-outlined"
+            selectFirstOption="true"
             @change-option-value="handleZoneChange" />
         </a-form-item>
         <a-form-item name="diskofferingid" ref="diskofferingid">
@@ -79,6 +80,8 @@
             optionValueKey="id"
             optionLabelKey="displaytext"
             defaultIcon="hdd-outlined"
+            :defaultOption="{ id: null, displaytext: ''}"
+            allowClear="true"
             :placeholder="apiParams.diskofferingid.description"
             @change-option="onChangeDiskOffering" />
         </a-form-item>
@@ -120,6 +123,7 @@
             optionLabelKey="path"
             defaultIcon="block-outlined"
             :placeholder="$t('label.domainid')"
+            allowClear="true"
             @change-option-value="handleDomainChange" />
         </a-form-item>
         <a-form-item name="account" ref="account" v-if="'listDomains' in $store.getters.apis">
@@ -134,6 +138,7 @@
             optionValueKey="name"
             optionLabelKey="name"
             defaultIcon="team-outlined"
+            allowClear="true"
             :placeholder="$t('label.account')"
             @change-option-value="handleAccountChange" />
         </a-form-item>
diff --git a/ui/src/views/storage/UploadVolume.vue b/ui/src/views/storage/UploadVolume.vue
index e81143270303..e049399910c8 100644
--- a/ui/src/views/storage/UploadVolume.vue
+++ b/ui/src/views/storage/UploadVolume.vue
@@ -55,6 +55,7 @@
             optionValueKey="id"
             optionLabelKey="name"
             defaultIcon="global-outlined"
+            selectFirstOption="true"
             @change-option-value="handleZoneChange" />
         </a-form-item>
         <a-form-item name="format" ref="format">
@@ -85,6 +86,8 @@
             optionValueKey="id"
             optionLabelKey="displaytext"
             defaultIcon="hdd-outlined"
+            :defaultOption="{ id: null, displaytext: ''}"
+            allowClear="true"
             @change-option="onChangeDiskOffering" />
         </a-form-item>
         <a-form-item name="checksum" ref="checksum">
@@ -108,6 +111,7 @@
             optionValueKey="id"
             optionLabelKey="path"
             defaultIcon="block-outlined"
+            allowClear="true"
             :placeholder="$t('label.domainid')"
             @change-option-value="handleDomainChange" />
         </a-form-item>
@@ -124,6 +128,7 @@
             optionLabelKey="name"
             defaultIcon="team-outlined"
             :placeholder="$t('label.account')"
+            allowClear="true"
             @change-option-value="handleAccountChange" />
         </a-form-item>
         <div :span="24" class="action-button">
@@ -190,14 +195,8 @@ export default {
       }
     },
     accountsApiParams () {
-      if (!this.form.domainid) {
-        return {
-          listall: true,
-          showicon: true
-        }
-      }
       return {
-        domainid: this.form.domainid,
+        domainid: this.form?.domainid || null,
         showicon: true
       }
     }
diff --git a/ui/src/views/tools/CreateWebhook.vue b/ui/src/views/tools/CreateWebhook.vue
index 92de0401883c..c1ac36bdec9b 100644
--- a/ui/src/views/tools/CreateWebhook.vue
+++ b/ui/src/views/tools/CreateWebhook.vue
@@ -76,6 +76,8 @@
             optionValueKey="id"
             optionLabelKey="path"
             defaultIcon="block-outlined"
+            :defaultOption="{ id: null, path: ''}"
+            allowClear="true"
             :placeholder="apiParams.domainid.description"
             @change-option-value="handleDomainChanged" />
         </a-form-item>
diff --git a/ui/src/views/tools/ManageVolumes.vue b/ui/src/views/tools/ManageVolumes.vue
index 915e30106029..7fe4a56c1bc7 100644
--- a/ui/src/views/tools/ManageVolumes.vue
+++ b/ui/src/views/tools/ManageVolumes.vue
@@ -380,6 +380,7 @@
                 optionValueKey="id"
                 optionLabelKey="path"
                 defaultIcon="block-outlined"
+                allowClear="true"
                 @change-option-value="changeDomain" />
             </a-form-item>
 
@@ -396,6 +397,7 @@
                 optionValueKey="name"
                 optionLabelKey="name"
                 defaultIcon="team-outlined"
+                allowClear="true"
                 @change-option-value="changeAccount" />
               <span v-if="importForm.accountError" class="required">{{ $t('label.required') }}</span>
             </a-form-item>
@@ -413,6 +415,7 @@
                 optionValueKey="id"
                 optionLabelKey="name"
                 defaultIcon="project-outlined"
+                allowClear="true"
                 @change-option-value="changeProject" />
               <span v-if="importForm.projectError" class="required">{{ $t('label.required') }}</span>
             </a-form-item>

From f317e9cc16c4b4b0b65fdb66f8590f4936ce7926 Mon Sep 17 00:00:00 2001
From: vishesh92 <vishesh92@gmail.com>
Date: Fri, 14 Nov 2025 13:31:32 +0530
Subject: [PATCH 3/5] fixup

---
 .../components/widgets/InfiniteScrollSelect.vue   | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/widgets/InfiniteScrollSelect.vue b/ui/src/components/widgets/InfiniteScrollSelect.vue
index 023330d41161..33fc8c813708 100644
--- a/ui/src/components/widgets/InfiniteScrollSelect.vue
+++ b/ui/src/components/widgets/InfiniteScrollSelect.vue
@@ -78,7 +78,7 @@
         </div>
       </div>
     </template>
-    <a-select-option v-for="option in options" :key="option.id" :value="option[optionValueKey]">
+    <a-select-option v-for="option in selectableOptions" :key="option.id" :value="option[optionValueKey]">
       <span>
         <span v-if="showIcon && option.id !== null && option.id !== undefined">
           <resource-icon v-if="option.icon && option.icon.base64image" :image="option.icon.base64image" size="1x" style="margin-right: 5px"/>
@@ -178,6 +178,19 @@ export default {
     },
     formattedSearchFooterMessage () {
       return `${this.$t('label.showing.results.for').replace('%x', this.searchQuery)}`
+    },
+    selectableOptions () {
+      const currentValue = this.$attrs.value
+      // Only filter out null/empty options when the current value is also null/undefined/empty
+      // This prevents such options from being selected and allows the placeholder to show instead
+      if (currentValue === null || currentValue === undefined || currentValue === '') {
+        return this.options.filter(option => {
+          const optionValue = option[this.optionValueKey]
+          return optionValue !== null && optionValue !== undefined && optionValue !== ''
+        })
+      }
+      // When a valid value is selected, show all options
+      return this.options
     }
   },
   watch: {

From 99dca0862a2973027a7a5477f02eed0a9b448c76 Mon Sep 17 00:00:00 2001
From: vishesh92 <vishesh92@gmail.com>
Date: Fri, 14 Nov 2025 17:43:23 +0530
Subject: [PATCH 4/5] fixup

---
 .../components/widgets/InfiniteScrollSelect.vue  | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/widgets/InfiniteScrollSelect.vue b/ui/src/components/widgets/InfiniteScrollSelect.vue
index 33fc8c813708..1788fd936f65 100644
--- a/ui/src/components/widgets/InfiniteScrollSelect.vue
+++ b/ui/src/components/widgets/InfiniteScrollSelect.vue
@@ -250,7 +250,9 @@ export default {
       const match = this.options.find(entry => entry[this.optionValueKey] === matchValue)
       if (!match) {
         this.successiveFetches++
-        if (this.options.length < this.totalCount) {
+        // Exclude defaultOption from count when comparing with totalCount
+        const apiOptionsCount = this.getApiOptionsCount()
+        if (apiOptionsCount < this.totalCount) {
           this.fetchItems()
         } else {
           this.resetPreselectedOptionValue()
@@ -272,6 +274,14 @@ export default {
       this.preselectedOptionValue = null
       this.successiveFetches = 0
     },
+    getApiOptionsCount () {
+      // Return count of options excluding the locally added defaultOption
+      if (this.defaultOption) {
+        const defaultOptionValue = this.defaultOption[this.optionValueKey]
+        return this.options.filter(option => option[this.optionValueKey] !== defaultOptionValue).length
+      }
+      return this.options.length
+    },
     autoSelectFirstOptionIfNeeded () {
       if (!this.selectFirstOption || this.hasAutoSelectedFirst) {
         return
@@ -320,7 +330,9 @@ export default {
     },
     onScroll (e) {
       const nearBottom = e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight - 10
-      const hasMore = this.options.length < this.totalCount
+      // Exclude defaultOption from count when comparing with totalCount
+      const apiOptionsCount = this.getApiOptionsCount()
+      const hasMore = apiOptionsCount < this.totalCount
       if (nearBottom && hasMore && !this.loading) {
         this.fetchItems()
       }

From 4fc90c123dc74a872587aaf3aabb34cc9fd41ff8 Mon Sep 17 00:00:00 2001
From: vishesh92 <vishesh92@gmail.com>
Date: Mon, 12 Jan 2026 14:42:41 +0530
Subject: [PATCH 5/5] Address comments

---
 ui/src/components/view/DedicateDomain.vue     |  1 -
 .../widgets/InfiniteScrollSelect.vue          | 35 +++++++++++--------
 .../compute/wizard/OwnershipSelection.vue     |  4 ---
 ui/src/views/iam/AddUser.vue                  |  1 -
 ui/src/views/infra/UsageRecords.vue           |  1 -
 ui/src/views/storage/CreateTemplate.vue       |  1 -
 ui/src/views/storage/UploadLocalVolume.vue    |  1 -
 ui/src/views/storage/UploadVolume.vue         |  1 -
 ui/src/views/tools/CreateWebhook.vue          |  3 --
 9 files changed, 20 insertions(+), 28 deletions(-)

diff --git a/ui/src/components/view/DedicateDomain.vue b/ui/src/components/view/DedicateDomain.vue
index 2e8221e8424a..4b8cc31ae46e 100644
--- a/ui/src/components/view/DedicateDomain.vue
+++ b/ui/src/components/view/DedicateDomain.vue
@@ -102,7 +102,6 @@ export default {
       this.selectedAccount = null
       this.$emit('domainChange', domainId)
       this.domainError = false
-      // InfiniteScrollSelect will auto-reload accounts when apiParams changes
     },
     handleChangeAccount (accountName) {
       this.selectedAccount = accountName
diff --git a/ui/src/components/widgets/InfiniteScrollSelect.vue b/ui/src/components/widgets/InfiniteScrollSelect.vue
index 1788fd936f65..859ce59d017f 100644
--- a/ui/src/components/widgets/InfiniteScrollSelect.vue
+++ b/ui/src/components/widgets/InfiniteScrollSelect.vue
@@ -191,6 +191,23 @@ export default {
       }
       // When a valid value is selected, show all options
       return this.options
+    },
+    apiOptionsCount () {
+      if (this.defaultOption) {
+        const defaultOptionValue = this.defaultOption[this.optionValueKey]
+        return this.options.filter(option => option[this.optionValueKey] !== defaultOptionValue).length
+      }
+      return this.options.length
+    },
+    preselectedMatchValue () {
+      // Extract the first value from preselectedOptionValue if it's an array, otherwise return the value itself
+      if (!this.preselectedOptionValue) return null
+      return Array.isArray(this.preselectedOptionValue) ? this.preselectedOptionValue[0] : this.preselectedOptionValue
+    },
+    preselectedMatch () {
+      // Find the matching option for the preselected value
+      if (!this.preselectedMatchValue) return null
+      return this.options.find(entry => entry[this.optionValueKey] === this.preselectedMatchValue) || null
     }
   },
   watch: {
@@ -246,13 +263,10 @@ export default {
         this.resetPreselectedOptionValue()
         return
       }
-      const matchValue = Array.isArray(this.preselectedOptionValue) ? this.preselectedOptionValue[0] : this.preselectedOptionValue
-      const match = this.options.find(entry => entry[this.optionValueKey] === matchValue)
-      if (!match) {
+      if (!this.preselectedMatch) {
         this.successiveFetches++
         // Exclude defaultOption from count when comparing with totalCount
-        const apiOptionsCount = this.getApiOptionsCount()
-        if (apiOptionsCount < this.totalCount) {
+        if (this.apiOptionsCount < this.totalCount) {
           this.fetchItems()
         } else {
           this.resetPreselectedOptionValue()
@@ -274,14 +288,6 @@ export default {
       this.preselectedOptionValue = null
       this.successiveFetches = 0
     },
-    getApiOptionsCount () {
-      // Return count of options excluding the locally added defaultOption
-      if (this.defaultOption) {
-        const defaultOptionValue = this.defaultOption[this.optionValueKey]
-        return this.options.filter(option => option[this.optionValueKey] !== defaultOptionValue).length
-      }
-      return this.options.length
-    },
     autoSelectFirstOptionIfNeeded () {
       if (!this.selectFirstOption || this.hasAutoSelectedFirst) {
         return
@@ -331,8 +337,7 @@ export default {
     onScroll (e) {
       const nearBottom = e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight - 10
       // Exclude defaultOption from count when comparing with totalCount
-      const apiOptionsCount = this.getApiOptionsCount()
-      const hasMore = apiOptionsCount < this.totalCount
+      const hasMore = this.apiOptionsCount < this.totalCount
       if (nearBottom && hasMore && !this.loading) {
         this.fetchItems()
       }
diff --git a/ui/src/views/compute/wizard/OwnershipSelection.vue b/ui/src/views/compute/wizard/OwnershipSelection.vue
index abf93beb2510..7bd4f61d36fd 100644
--- a/ui/src/views/compute/wizard/OwnershipSelection.vue
+++ b/ui/src/views/compute/wizard/OwnershipSelection.vue
@@ -132,7 +132,6 @@ export default {
     }
   },
   created () {
-    // Set initial domain selection
     const ownerDomainId = this.$store.getters.project?.domainid || this.$store.getters.userInfo.domainid
     if (ownerDomainId) {
       this.selectedDomain = ownerDomainId
@@ -140,16 +139,13 @@ export default {
   },
   methods: {
     changeAccountType () {
-      // Reset account/project selection when switching types
       this.selectedAccount = null
       this.selectedProject = null
 
-      // Trigger initial selection based on type
       this.handleDomainChange(this.selectedDomain)
     },
     handleDomainChange (domainId) {
       this.selectedDomain = domainId
-      // Reset child selections
       this.selectedAccount = null
       this.selectedProject = null
 
diff --git a/ui/src/views/iam/AddUser.vue b/ui/src/views/iam/AddUser.vue
index 74770061ed9a..3f0bd018050f 100644
--- a/ui/src/views/iam/AddUser.vue
+++ b/ui/src/views/iam/AddUser.vue
@@ -249,7 +249,6 @@ export default {
     handleDomainChange (domainId) {
       this.form.domainid = domainId
       this.form.account = null
-      // InfiniteScrollSelect will auto-reload accounts when apiParams changes
     },
     fetchTimeZone (value) {
       this.timeZoneMap = []
diff --git a/ui/src/views/infra/UsageRecords.vue b/ui/src/views/infra/UsageRecords.vue
index a5fe3cf85c50..0a41aa4052c6 100644
--- a/ui/src/views/infra/UsageRecords.vue
+++ b/ui/src/views/infra/UsageRecords.vue
@@ -564,7 +564,6 @@ export default {
     handleDomainChange (domainId) {
       this.form.domain = domainId
       this.form.account = null
-      // InfiniteScrollSelect will auto-reload accounts when apiParams changes
     },
     handleDomainOptionChange (option) {
       if (option && option.id) {
diff --git a/ui/src/views/storage/CreateTemplate.vue b/ui/src/views/storage/CreateTemplate.vue
index e885d82404cc..819d0cc0ac34 100644
--- a/ui/src/views/storage/CreateTemplate.vue
+++ b/ui/src/views/storage/CreateTemplate.vue
@@ -314,7 +314,6 @@ export default {
       this.domainid = domainId
       this.form.account = null
       this.account = null
-      // InfiniteScrollSelect will auto-reload accounts when apiParams changes
     },
     handleAccountChange (accountName) {
       if (accountName) {
diff --git a/ui/src/views/storage/UploadLocalVolume.vue b/ui/src/views/storage/UploadLocalVolume.vue
index 8abc17bfd92d..3a0bf4e129fe 100644
--- a/ui/src/views/storage/UploadLocalVolume.vue
+++ b/ui/src/views/storage/UploadLocalVolume.vue
@@ -262,7 +262,6 @@ export default {
       this.form.domainid = domainId
       this.domainId = domainId
       this.form.account = null
-      // InfiniteScrollSelect will auto-reload accounts when apiParams changes
     },
     handleAccountChange (accountName) {
       this.form.account = accountName
diff --git a/ui/src/views/storage/UploadVolume.vue b/ui/src/views/storage/UploadVolume.vue
index e049399910c8..c2cbaabc2256 100644
--- a/ui/src/views/storage/UploadVolume.vue
+++ b/ui/src/views/storage/UploadVolume.vue
@@ -234,7 +234,6 @@ export default {
       this.form.domainid = domainId
       this.domainId = domainId
       this.form.account = null
-      // InfiniteScrollSelect will auto-reload accounts when apiParams changes
     },
     handleAccountChange (accountName) {
       this.form.account = accountName
diff --git a/ui/src/views/tools/CreateWebhook.vue b/ui/src/views/tools/CreateWebhook.vue
index c1ac36bdec9b..09573ce70128 100644
--- a/ui/src/views/tools/CreateWebhook.vue
+++ b/ui/src/views/tools/CreateWebhook.vue
@@ -292,14 +292,11 @@ export default {
       }, 1)
     },
     handleScopeChange (e) {
-      // Reset domain and account when scope changes
       this.form.domainid = null
       this.form.account = null
     },
     handleDomainChanged (domainid) {
-      // Reset account when domain changes
       this.form.account = null
-      // InfiniteScrollSelect will auto-reload accounts when apiParams changes
     }
   }
 }