ui: Auto-focus input, form (#4762)

* autofocus into the first element (form/dialog) * add autofocus missing * add autofocus to missing elements
2021-03-29 17:49:26 +07:00 · 2021-03-29 17:49:26 +07:00 · 642878063d
parent 97176690b8
commit 642878063d
102 changed files with 257 additions and 90 deletions
--- a/ui/src/components/view/ListResourceTable.vue
+++ b/ui/src/components/view/ListResourceTable.vue
@ -22,7 +22,8 @@
      style="width: 25vw;float: right;margin-bottom: 10px; z-index: 8"
      :placeholder="$t('label.search')"
      v-model="filter"
-      @search="handleSearch" />
+      @search="handleSearch"
+      autoFocus />

    <a-table
      size="small"
--- a/ui/src/components/view/ResourceLimitTab.vue
+++ b/ui/src/components/view/ResourceLimitTab.vue
@ -34,6 +34,7 @@
          v-decorator="[item.resourcetype, {
            initialValue: item.max
          }]"
+          :autoFocus="index === 0"
        />
      </a-form-item>
      <div class="card-footer">
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@ -173,7 +173,7 @@
                  }]"
                  v-model="formModel[field.name]"
                  :placeholder="field.description"
-                  :autoFocus="fieldIndex === 0"
+                  :autoFocus="fieldIndex === firstIndex"
                />
              </span>
              <span v-else-if="currentAction.mapping && field.name in currentAction.mapping && currentAction.mapping[field.name].options">
@ -183,6 +183,7 @@
                    rules: [{ required: field.required, message: `${$t('message.error.select')}` }]
                  }]"
                  :placeholder="field.description"
+                  :autoFocus="fieldIndex === firstIndex"
                >
                  <a-select-option key="" >{{ }}</a-select-option>
                  <a-select-option v-for="(opt, optIndex) in currentAction.mapping[field.name].options" :key="optIndex">
@ -204,6 +205,7 @@
                  :filterOption="(input, option) => {
                    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }"
+                  :autoFocus="fieldIndex === firstIndex"
                >
                  <a-select-option key="">{{ }}</a-select-option>
                  <a-select-option v-for="(opt, optIndex) in field.opts" :key="optIndex">
@ -224,6 +226,7 @@
                  :filterOption="(input, option) => {
                    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }"
+                  :autoFocus="fieldIndex === firstIndex"
                >
                  <a-select-option key="">{{ }}</a-select-option>
                  <a-select-option v-for="opt in field.opts" :key="opt.id">
@ -239,6 +242,7 @@
                    rules: [{ required: field.required, message: `${$t('message.error.select')}` }]
                  }]"
                  :placeholder="field.description"
+                  :autoFocus="fieldIndex === firstIndex"
                >
                  <a-select-option v-for="(opt, optIndex) in field.opts" :key="optIndex">
                    {{ opt.name && opt.type ? opt.name + ' (' + opt.type + ')' : opt.name || opt.description }}
@ -247,7 +251,7 @@
              </span>
              <span v-else-if="field.type==='long'">
                <a-input-number
-                  :autoFocus="fieldIndex === 0"
+                  :autoFocus="fieldIndex === firstIndex"
                  style="width: 100%;"
                  v-decorator="[field.name, {
                    rules: [{ required: field.required, message: `${$t('message.validate.number')}` }]
@ -270,6 +274,7 @@
                  }]"
                  :placeholder="field.description"
                  @blur="($event) => handleConfirmBlur($event, field.name)"
+                  :autoFocus="fieldIndex === firstIndex"
                />
              </span>
              <span v-else-if="field.name==='certificate' || field.name==='privatekey' || field.name==='certchain'">
@ -279,11 +284,12 @@
                    rules: [{ required: field.required, message: `${$t('message.error.required.input')}` }]
                  }]"
                  :placeholder="field.description"
+                  :autoFocus="fieldIndex === firstIndex"
                />
              </span>
              <span v-else>
                <a-input
-                  :autoFocus="fieldIndex === 0"
+                  :autoFocus="fieldIndex === firstIndex"
                  v-decorator="[field.name, {
                    rules: [{ required: field.required, message: `${$t('message.error.required.input')}` }]
                  }]"
@ -394,7 +400,8 @@ export default {
      searchParams: {},
      actions: [],
      formModel: {},
-      confirmDirty: false
+      confirmDirty: false,
+      firstIndex: 0
    }
  },
  beforeCreate () {
@ -756,6 +763,7 @@ export default {
          })
        }
      }
+      this.getFirstIndexFocus()

      this.showAction = true
      for (const param of this.currentAction.paramFields) {
@ -771,6 +779,16 @@ export default {
        this.fillEditFormFieldValues()
      }
    },
+    getFirstIndexFocus () {
+      this.firstIndex = 0
+      for (let fieldIndex = 0; fieldIndex < this.currentAction.paramFields.length; fieldIndex++) {
+        const field = this.currentAction.paramFields[fieldIndex]
+        if (!(this.currentAction.mapping && field.name in this.currentAction.mapping && this.currentAction.mapping[field.name].value)) {
+          this.firstIndex = fieldIndex
+          break
+        }
+      }
+    },
    listUuidOpts (param) {
      if (this.currentAction.mapping && param.name in this.currentAction.mapping && !this.currentAction.mapping[param.name].api) {
        return
--- a/ui/src/views/compute/AssignInstance.vue
+++ b/ui/src/views/compute/AssignInstance.vue
@ -29,7 +29,7 @@

      <div class="form__item">
        <p class="form__label">{{ $t('label.accounttype') }}</p>
-        <a-select v-model="selectedAccountType" defaultValue="account">
+        <a-select v-model="selectedAccountType" defaultValue="account" autoFocus>
          <a-select-option :value="$t('label.account')">{{ $t('label.account') }}</a-select-option>
          <a-select-option :value="$t('label.project')">{{ $t('label.project') }}</a-select-option>
        </a-select>
--- a/ui/src/views/compute/AttachIso.vue
+++ b/ui/src/views/compute/AttachIso.vue
@ -26,7 +26,8 @@
            v-decorator="['id', {
              initialValue: this.selectedIso,
              rules: [{ required: true, message: `${this.$t('label.required')}`}]
-            }]" >
+            }]"
+            autoFocus>
            <a-select-option v-for="iso in isos" :key="iso.id">
              {{ iso.displaytext || iso.name }}
            </a-select-option>
--- a/ui/src/views/compute/ChangeAffinity.vue
+++ b/ui/src/views/compute/ChangeAffinity.vue
@ -29,7 +29,8 @@
        style="margin-bottom: 10px;"
        :placeholder="$t('label.search')"
        v-model="filter"
-        @search="handleSearch" />
+        @search="handleSearch"
+        autoFocus />
    </div>

    <div class="form__item">
--- a/ui/src/views/compute/CreateKubernetesCluster.vue
+++ b/ui/src/views/compute/CreateKubernetesCluster.vue
@ -33,7 +33,8 @@
            v-decorator="['name', {
              rules: [{ required: true, message: $t('message.error.kubecluster.name') }]
            }]"
-            :placeholder="apiParams.name.description"/>
+            :placeholder="apiParams.name.description"
+            autoFocus />
        </a-form-item>
        <a-form-item>
          <span slot="label">
--- a/ui/src/views/compute/CreateSSHKeyPair.vue
+++ b/ui/src/views/compute/CreateSSHKeyPair.vue
@ -28,7 +28,8 @@
            v-decorator="['name', {
              rules: [{ required: true, message: $t('message.error.name') }]
            }]"
-            :placeholder="apiParams.name.description"/>
+            :placeholder="apiParams.name.description"
+            autoFocus />
        </a-form-item>
        <a-form-item :label="$t('label.publickey')">
          <a-input
--- a/ui/src/views/compute/CreateSnapshotWizard.vue
+++ b/ui/src/views/compute/CreateSnapshotWizard.vue
@ -36,7 +36,8 @@
              rules: [{ required: true, message: $t('message.error.select') }]
            }]"
            @change="onChangeVolume"
-            :placeholder="apiParams.volumeid.description">
+            :placeholder="apiParams.volumeid.description"
+            autoFocus>
            <a-select-option
              v-for="volume in listVolumes"
              :key="volume.id">
--- a/ui/src/views/compute/DeployVM.vue
+++ b/ui/src/views/compute/DeployVM.vue
@ -41,6 +41,7 @@
                        :options="zoneSelectOptions"
                        @change="onSelectZoneId"
                        :loading="loading.zones"
+                        autoFocus
                      ></a-select>
                    </a-form-item>
                    <a-form-item
@ -479,6 +480,7 @@
                      v-if="vm.templateid && ['KVM', 'VMware'].includes(hypervisor) && !template.deployasis">
                      <a-form-item :label="$t('label.boottype')">
                        <a-select
+                          :autoFocus="vm.templateid && ['KVM', 'VMware'].includes(hypervisor) && !template.deployasis"
                          v-decorator="['boottype']"
                          @change="fetchBootModes"
                        >
--- a/ui/src/views/compute/DestroyVM.vue
+++ b/ui/src/views/compute/DestroyVM.vue
@ -44,7 +44,8 @@
            v-decorator="['volumeids']"
            :placeholder="$t('label.delete.volumes')"
            mode="multiple"
-            :loading="loading">
+            :loading="loading"
+            :autoFocus="$store.getters.userInfo.roletype !== 'Admin' && !$store.getters.features.allowuserexpungerecovervm">
            <a-select-option v-for="volume in volumes" :key="volume.id">
              {{ volume.name }}
            </a-select-option>
--- a/ui/src/views/compute/EditVM.vue
+++ b/ui/src/views/compute/EditVM.vue
@ -30,7 +30,8 @@
          </a-tooltip>
        </span>
        <a-input
-          v-decorator="['name', { initialValue: resource.name || '' }]" />
+          v-decorator="['name', { initialValue: resource.name || '' }]"
+          autoFocus />
      </a-form-item>
      <a-form-item>
        <span slot="label">
--- a/ui/src/views/compute/InstanceTab.vue
+++ b/ui/src/views/compute/InstanceTab.vue
@ -165,7 +165,7 @@
      {{ $t('message.network.addvm.desc') }}
      <div class="modal-form">
        <p class="modal-form__label">{{ $t('label.network') }}:</p>
-        <a-select :defaultValue="addNetworkData.network" @change="e => addNetworkData.network = e">
+        <a-select :defaultValue="addNetworkData.network" @change="e => addNetworkData.network = e" autoFocus>
          <a-select-option
            v-for="network in addNetworkData.allNetworks"
            :key="network.id"
@ -195,14 +195,16 @@
          showSearch
          v-if="editNicResource.type==='Shared'"
          v-model="editIpAddressValue"
-          :loading="listIps.loading">
+          :loading="listIps.loading"
+          :autoFocus="editNicResource.type==='Shared'">
          <a-select-option v-for="ip in listIps.opts" :key="ip.ipaddress">
            {{ ip.ipaddress }}
          </a-select-option>
        </a-select>
        <a-input
          v-else
-          v-model="editIpAddressValue"></a-input>
+          v-model="editIpAddressValue"
+          :autoFocus="editNicResource.type!=='Shared'"></a-input>
      </div>
    </a-modal>

@ -218,7 +220,7 @@
        {{ $t('message.network.secondaryip') }}
      </p>
      <a-divider />
-      <a-input :placeholder="$t('label.new.secondaryip.description')" v-model="newSecondaryIp"></a-input>
+      <a-input :placeholder="$t('label.new.secondaryip.description')" v-model="newSecondaryIp" autoFocus></a-input>
      <div style="margin-top: 10px; display: flex; justify-content:flex-end;">
        <a-button @click="submitSecondaryIP" type="primary" style="margin-right: 10px;">{{ $t('label.add.secondary.ip') }}</a-button>
        <a-button @click="closeModals">{{ $t('label.close') }}</a-button>
--- a/ui/src/views/compute/MigrateWizard.vue
+++ b/ui/src/views/compute/MigrateWizard.vue
@ -21,7 +21,8 @@
      :placeholder="$t('label.search')"
      v-model="searchQuery"
      style="margin-bottom: 10px;"
-      @search="fetchData" />
+      @search="fetchData"
+      autoFocus />
    <a-table
      size="small"
      style="overflow-y: auto"
--- a/ui/src/views/compute/ScaleKubernetesCluster.vue
+++ b/ui/src/views/compute/ScaleKubernetesCluster.vue
@ -45,7 +45,8 @@
                }
              }]
            }]"
-            :placeholder="apiParams.size.description"/>
+            :placeholder="apiParams.size.description"
+            autoFocus />
        </a-form-item>
        <a-form-item>
          <span slot="label">
--- a/ui/src/views/compute/StartVirtualMachine.vue
+++ b/ui/src/views/compute/StartVirtualMachine.vue
@ -43,7 +43,8 @@
              }"
              :loading="podsLoading"
              :placeholder="apiParams.podid.description"
-              @change="handlePodChange">
+              @change="handlePodChange"
+              :autoFocus="this.$store.getters.userInfo.roletype === 'Admin'">
              <a-select-option v-for="pod in this.pods" :key="pod.id">
                {{ pod.name }}
              </a-select-option>
--- a/ui/src/views/compute/UpgradeKubernetesCluster.vue
+++ b/ui/src/views/compute/UpgradeKubernetesCluster.vue
@ -44,7 +44,8 @@
              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }"
            :loading="kubernetesVersionLoading"
-            :placeholder="apiParams.kubernetesversionid.description">
+            :placeholder="apiParams.kubernetesversionid.description"
+            autoFocus >
            <a-select-option v-for="(opt, optIndex) in this.kubernetesVersions" :key="optIndex">
              {{ opt.name || opt.description }}
            </a-select-option>
--- a/ui/src/views/compute/backup/FormSchedule.vue
+++ b/ui/src/views/compute/backup/FormSchedule.vue
@ -61,7 +61,8 @@
                      rules: [{required: true, message: $t('message.error.required.input')}]
                    }]"
                    :min="1"
-                    :max="59"/>
+                    :max="59"
+                    autoFocus />
                </a-tooltip>
              </a-form-item>
            </a-col>
--- a/ui/src/views/compute/wizard/ComputeOfferingSelection.vue
+++ b/ui/src/views/compute/wizard/ComputeOfferingSelection.vue
@ -21,7 +21,8 @@
      style="width: 25vw;float: right;margin-bottom: 10px; z-index: 8"
      :placeholder="$t('label.search')"
      v-model="filter"
-      @search="handleSearch" />
+      @search="handleSearch"
+      autoFocus />
    <a-table
      :columns="columns"
      :dataSource="tableSource"
--- a/ui/src/views/compute/wizard/ComputeSelection.vue
+++ b/ui/src/views/compute/wizard/ComputeSelection.vue
@ -35,6 +35,7 @@
              </a-col>
              <a-col :md="4" :lg="4">
                <a-input-number
+                  :autoFocus="isConstrained"
                  v-model="cpuNumberInputValue"
                  @change="($event) => updateComputeCpuNumber($event)"
                />
@ -48,6 +49,7 @@
            :validate-status="errors.cpuspeed.status"
            :help="errors.cpuspeed.message">
            <a-input-number
+              :autoFocus="!isConstrained"
              v-model="cpuSpeedInputValue"
              @change="($event) => updateComputeCpuSpeed($event)"
            />
--- a/ui/src/views/compute/wizard/DiskSizeSelection.vue
+++ b/ui/src/views/compute/wizard/DiskSizeSelection.vue
@ -23,6 +23,7 @@
      <a-col :md="4" :lg="4">
        <span style="display: inline-flex">
          <a-input-number
+            autoFocus
            v-model="inputValue"
            @change="($event) => updateDiskSize($event)"
          />
--- a/ui/src/views/compute/wizard/MultiDiskSelection.vue
+++ b/ui/src/views/compute/wizard/MultiDiskSelection.vue
@ -28,6 +28,7 @@

      <span slot="offering" slot-scope="text, record">
        <a-select
+          autoFocus
          v-if="validOfferings[record.id] && validOfferings[record.id].length > 0"
          @change="updateOffering($event, record.id)"
          :defaultValue="validOfferings[record.id][0].id">
--- a/ui/src/views/compute/wizard/NetworkConfiguration.vue
+++ b/ui/src/views/compute/wizard/NetworkConfiguration.vue
@ -30,9 +30,10 @@
      <div>{{ text }}</div>
      <small v-if="record.type!=='L2'">{{ $t('label.cidr') + ': ' + record.cidr }}</small>
    </template>
-    <template slot="ipAddress" slot-scope="text, record">
-      <a-form-item v-if="record.type!=='L2'">
+    <template slot="ipAddress" slot-scope="text, record, index">
+      <a-form-item v-if="record.type!=='L2' && index === 0">
        <a-input
+          :autoFocus="record.type!=='L2'"
          style="width: 150px;"
          v-decorator="['ipAddress' + record.id, {
            rules: [{
@ -49,9 +50,10 @@
        </a-input>
      </a-form-item>
    </template>
-    <template slot="macAddress" slot-scope="text, record">
+    <template slot="macAddress" slot-scope="text, record, index">
      <a-form-item>
        <a-input
+          :autoFocus="record.type==='L2' && index === 0"
          style="width: 150px;"
          :placeholder="$t('label.macaddress')"
          v-decorator="[`macAddress` + record.id, {
--- a/ui/src/views/iam/AddAccount.vue
+++ b/ui/src/views/iam/AddAccount.vue
@ -31,7 +31,8 @@
              initialValue: selectedRole,
              rules: [{ required: true, message: $t('message.error.select') }] }]"
            :loading="roleLoading"
-            :placeholder="apiParams.roleid.description">
+            :placeholder="apiParams.roleid.description"
+            autoFocus>
            <a-select-option v-for="role in roles" :key="role.id">
              {{ role.name + ' (' + role.type + ')' }}
            </a-select-option>
--- a/ui/src/views/iam/AddLdapAccount.vue
+++ b/ui/src/views/iam/AddLdapAccount.vue
@ -50,7 +50,7 @@
            @submit="handleSubmit"
            layout="vertical" >
            <a-form-item :label="$t('label.filterby')">
-              <a-select @change="fetchListLdapUsers" v-model="selectedFilter" >
+              <a-select @change="fetchListLdapUsers" v-model="selectedFilter" autoFocus >
                <a-select-option v-for="opt in filters" :key="opt.id" >
                  {{ opt.name }}
                </a-select-option>
--- a/ui/src/views/iam/AddUser.vue
+++ b/ui/src/views/iam/AddUser.vue
@ -30,7 +30,8 @@
            v-decorator="['username', {
              rules: [{ required: true, message: $t('message.error.required.input') }]
            }]"
-            :placeholder="apiParams.username.description" />
+            :placeholder="apiParams.username.description"
+            autoFocus/>
        </a-form-item>
        <a-row :gutter="12">
          <a-col :md="24" :lg="12">
--- a/ui/src/views/iam/ChangeUserPassword.vue
+++ b/ui/src/views/iam/ChangeUserPassword.vue
@ -33,7 +33,8 @@
            v-decorator="['currentpassword', {
              rules: [{ required: true, message: $t('message.error.current.password') }]
            }]"
-            :placeholder="$t('message.error.current.password')"/>
+            :placeholder="$t('message.error.current.password')"
+            autoFocus />
        </a-form-item>
        <a-form-item>
          <span slot="label">
--- a/ui/src/views/iam/ConfigureSamlSsoAuth.vue
+++ b/ui/src/views/iam/ConfigureSamlSsoAuth.vue
@ -25,6 +25,7 @@
          }]"
          :checked="isSamlEnabled"
          @change="val => { isSamlEnabled = val }"
+          autoFocus
        />
      </a-form-item>
      <a-form-item :label="$t('label.samlentity')">
--- a/ui/src/views/iam/CreateRole.vue
+++ b/ui/src/views/iam/CreateRole.vue
@ -33,7 +33,8 @@
            v-decorator="['name', {
              rules: [{ required: true, message: $t('message.error.required.input') }]
            }]"
-            :placeholder="createRoleApiParams.name.description" />
+            :placeholder="createRoleApiParams.name.description"
+            autoFocus />
        </a-form-item>

        <a-form-item>
--- a/ui/src/views/iam/DomainActionForm.vue
+++ b/ui/src/views/iam/DomainActionForm.vue
@ -68,6 +68,7 @@
                  rules: [{ required: field.required, message: $t('message.error.select') }]
                }]"
                :placeholder="field.description"
+                :autoFocus="fieldIndex === firstIndex"
              >
                <a-select-option v-for="(opt, optIndex) in action.mapping[field.name].options" :key="optIndex">
                  {{ opt }}
@ -87,6 +88,7 @@
                :filterOption="(input, option) => {
                  return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }"
+                :autoFocus="fieldIndex === firstIndex"
              >
                <a-select-option v-for="(opt, optIndex) in field.opts" :key="optIndex">
                  {{ opt.name || opt.description || opt.traffictype || opt.publicip }}
@ -101,6 +103,7 @@
                  rules: [{ required: field.required, message: $t('message.error.select') }]
                }]"
                :placeholder="field.description"
+                :autoFocus="fieldIndex === firstIndex"
              >
                <a-select-option v-for="(opt, optIndex) in field.opts" :key="optIndex">
                  {{ opt.name && opt.type ? opt.name + ' (' + opt.type + ')' : opt.name || opt.description }}
@ -113,6 +116,7 @@
                  rules: [{ required: field.required, message: `${$t('message.validate.number')}` }]
                }]"
                :placeholder="field.description"
+                :autoFocus="fieldIndex === firstIndex"
              />
            </span>
            <span v-else>
@ -120,7 +124,8 @@
                v-decorator="[field.name, {
                  rules: [{ required: field.required, message: $t('message.error.required.input') }]
                }]"
-                :placeholder="field.description" />
+                :placeholder="field.description"
+                :autoFocus="fieldIndex === firstIndex" />
            </span>
          </a-form-item>
        </a-form>
@ -151,6 +156,16 @@ export default {
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
+  created () {
+    this.firstIndex = 0
+    for (let fieldIndex = 0; fieldIndex < this.action.paramFields.length; fieldIndex++) {
+      const field = this.action.paramFields[fieldIndex]
+      if (!(this.action.mapping && field.name in this.action.mapping && this.action.mapping[field.name].value)) {
+        this.firstIndex = fieldIndex
+        break
+      }
+    }
+  },
  mounted () {
    if (this.action.dataView && this.action.icon === 'edit') {
      this.fillEditFormFieldValues()
--- a/ui/src/views/iam/EditUser.vue
+++ b/ui/src/views/iam/EditUser.vue
@ -30,7 +30,8 @@
            v-decorator="['username', {
              rules: [{ required: true, message: $t('message.error.required.input') }]
            }]"
-            :placeholder="apiParams.username.description" />
+            :placeholder="apiParams.username.description"
+            autoFocus />
        </a-form-item>
        <a-form-item>
          <span slot="label">
--- a/ui/src/views/iam/ImportRole.vue
+++ b/ui/src/views/iam/ImportRole.vue
@ -62,7 +62,8 @@
            v-decorator="['name', {
              rules: [{ required: true, message: $t('message.error.required.input') }]
            }]"
-            :placeholder="importRoleApiParams.name.description" />
+            :placeholder="importRoleApiParams.name.description"
+            autoFocus />
        </a-form-item>

        <a-form-item>
--- a/ui/src/views/iam/PermissionEditable.vue
+++ b/ui/src/views/iam/PermissionEditable.vue
@ -18,7 +18,8 @@
 <template>
  <a-select
    :value="defaultValue"
-    @change="handleChange">
+    @change="handleChange"
+    autoFocus>
    <a-select-option value="allow">{{ $t('label.allow') }}</a-select-option>
    <a-select-option value="deny">{{ $t('label.deny') }}</a-select-option>
  </a-select>
--- a/ui/src/views/image/AddKubernetesSupportedVersion.vue
+++ b/ui/src/views/image/AddKubernetesSupportedVersion.vue
@ -33,7 +33,8 @@
            v-decorator="['semanticversion', {
              rules: [{ required: true, message: $t('message.error.kuberversion') }]
            }]"
-            :placeholder="apiParams.semanticversion.description"/>
+            :placeholder="apiParams.semanticversion.description"
+            autoFocus />
        </a-form-item>
        <a-form-item>
          <span slot="label">
--- a/ui/src/views/image/IsoZones.vue
+++ b/ui/src/views/image/IsoZones.vue
@ -108,7 +108,8 @@
              :filterOption="(input, option) => {
                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
              }"
-              :loading="zoneLoading">
+              :loading="zoneLoading"
+              autoFocus>
              <a-select-option v-for="zone in zones" :key="zone.id">
                {{ zone.name }}
              </a-select-option>
--- a/ui/src/views/image/RegisterOrUploadIso.vue
+++ b/ui/src/views/image/RegisterOrUploadIso.vue
@ -29,7 +29,7 @@
        layout="vertical">
        <a-form-item v-if="currentForm === 'Create'" :label="$t('label.url')">
          <a-input
-            autoFocus
+            :autoFocus="currentForm === 'Create'"
            v-decorator="['url', {
              rules: [{ required: true, message: `${this.$t('label.upload.iso.from.local')}` }]
            }]"
@ -57,7 +57,8 @@
            v-decorator="['name', {
              rules: [{ required: true, message: `${this.$t('message.error.required.input')}` }]
            }]"
-            :placeholder="apiParams.name.description" />
+            :placeholder="apiParams.name.description"
+            :autoFocus="currentForm !== 'Create'" />
        </a-form-item>

        <a-form-item :label="$t('label.displaytext')">
--- a/ui/src/views/image/RegisterOrUploadTemplate.vue
+++ b/ui/src/views/image/RegisterOrUploadTemplate.vue
@ -31,7 +31,7 @@
          <a-row :gutter="12">
            <a-form-item :label="$t('label.url')">
              <a-input
-                autoFocus
+                :autoFocus="currentForm === 'Create'"
                v-decorator="['url', {
                  rules: [{ required: true, message: `${this.$t('message.error.required.input')}` }]
                }]"
@ -64,7 +64,8 @@
              v-decorator="['name', {
                rules: [{ required: true, message: `${this.$t('message.error.required.input')}` }]
              }]"
-              :placeholder="apiParams.name.description" />
+              :placeholder="apiParams.name.description"
+              :autoFocus="currentForm !== 'Create'"/>
          </a-form-item>
        </a-row>
        <a-row :gutter="12">
--- a/ui/src/views/image/TemplateZones.vue
+++ b/ui/src/views/image/TemplateZones.vue
@ -100,7 +100,8 @@
              :filterOption="(input, option) => {
                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
              }"
-              :loading="zoneLoading">
+              :loading="zoneLoading"
+              autoFocus>
              <a-select-option v-for="zone in zones" :key="zone.id">
                {{ zone.name }}
              </a-select-option>
--- a/ui/src/views/image/UpdateKubernetesSupportedVersion.vue
+++ b/ui/src/views/image/UpdateKubernetesSupportedVersion.vue
@ -34,7 +34,8 @@
              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }"
            :loading="stateLoading"
-            :placeholder="apiParams.state.description">
+            :placeholder="apiParams.state.description"
+            autoFocus >
            <a-select-option v-for="(opt, optIndex) in this.states" :key="optIndex">
              {{ opt.name || opt.description }}
            </a-select-option>
--- a/ui/src/views/image/UpdateTemplateIsoPermissions.vue
+++ b/ui/src/views/image/UpdateTemplateIsoPermissions.vue
@ -23,7 +23,11 @@

    <div class="form__item">
      <p class="form__label">{{ $t('label.operation') }}</p>
-      <a-select v-model="selectedOperation" :defaultValue="$t('label.add')" @change="fetchData">
+      <a-select
+        v-model="selectedOperation"
+        :defaultValue="$t('label.add')"
+        @change="fetchData"
+        autoFocus>
        <a-select-option :value="$t('label.add')">{{ $t('label.add') }}</a-select-option>
        <a-select-option :value="$t('label.remove')">{{ $t('label.remove') }}</a-select-option>
        <a-select-option :value="$t('label.reset')">{{ $t('label.reset') }}</a-select-option>
--- a/ui/src/views/infra/AddPrimaryStorage.vue
+++ b/ui/src/views/infra/AddPrimaryStorage.vue
@ -26,7 +26,10 @@
              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
            </a-tooltip>
          </span>
-          <a-select v-decorator="['scope', { initialValue: 'cluster' }]" @change="val => { this.scope = val }">
+          <a-select
+            v-decorator="['scope', { initialValue: 'cluster' }]"
+            @change="val => { this.scope = val }"
+            autoFocus>
            <a-select-option :value="'cluster'"> {{ $t('label.clusterid') }} </a-select-option>
            <a-select-option :value="'zone'"> {{ $t('label.zoneid') }} </a-select-option>
          </a-select>
--- a/ui/src/views/infra/AddSecondaryStorage.vue
+++ b/ui/src/views/infra/AddSecondaryStorage.vue
@ -20,7 +20,7 @@
    <a-spin :spinning="loading">
      <a-form :form="form" layout="vertical">
        <a-form-item :label="$t('label.name')">
-          <a-input v-decorator="['name']" />
+          <a-input v-decorator="['name']" autoFocus />
        </a-form-item>
        <a-form-item :label="$t('label.providername')">
          <a-select
--- a/ui/src/views/infra/ClusterAdd.vue
+++ b/ui/src/views/infra/ClusterAdd.vue
@ -20,7 +20,7 @@
    <div class="form">
      <div class="form__item">
        <div class="form__label"><span class="required">* </span>{{ $t('label.zonenamelabel') }}</div>
-        <a-select v-model="zoneId" @change="fetchPods">
+        <a-select v-model="zoneId" @change="fetchPods" autoFocus>
          <a-select-option
            v-for="zone in zonesList"
            :value="zone.id"
--- a/ui/src/views/infra/HostAdd.vue
+++ b/ui/src/views/infra/HostAdd.vue
@ -21,7 +21,7 @@

      <div class="form__item">
        <div class="form__label"><span class="required">* </span>{{ $t('label.zonenamelabel') }}</div>
-        <a-select v-model="zoneId" @change="fetchPods">
+        <a-select v-model="zoneId" @change="fetchPods" autoFocus>
          <a-select-option
            v-for="zone in zonesList"
            :value="zone.id"
--- a/ui/src/views/infra/MigrateData.vue
+++ b/ui/src/views/infra/MigrateData.vue
@ -32,6 +32,7 @@
            }]"
            :loading="loading"
            @change="val => { selectedStore = val }"
+            autoFocus
          >
            <a-select-option
              v-for="store in imageStores"
--- a/ui/src/views/infra/PodAdd.vue
+++ b/ui/src/views/infra/PodAdd.vue
@ -24,7 +24,8 @@
          v-decorator="['zoneid', {
            initialValue: this.zoneId,
            rules: [{ required: true, message: `${$t('label.required')}` }] }
-          ]">
+          ]"
+          autoFocus>
          <a-select-option
            v-for="zone in zonesList"
            :value="zone.id"
--- a/ui/src/views/infra/network/DedicatedVLANTab.vue
+++ b/ui/src/views/infra/network/DedicatedVLANTab.vue
@ -74,6 +74,7 @@
              v-decorator="['range', {
                rules: [{ required: true, message: `${$t('label.required')}` }]
              }]"
+              autoFocus
            ></a-input>
          </a-form-item>

--- a/ui/src/views/infra/network/EditTrafficLabel.vue
+++ b/ui/src/views/infra/network/EditTrafficLabel.vue
@ -27,6 +27,7 @@
            </a-tooltip>
          </span>
          <a-select
+            autoFocus
            v-decorator="['id', {
              initialValue: selectedType,
              rules: [{ required: true, message: $t('message.error.select') }] }]"
--- a/ui/src/views/infra/network/IpRangesTabManagement.vue
+++ b/ui/src/views/infra/network/IpRangesTabManagement.vue
@ -81,6 +81,7 @@
      >
        <a-form-item :label="$t('label.podid')" class="form__item">
          <a-select
+            autoFocus
            v-decorator="['pod', {
              rules: [{ required: true, message: `${$t('label.required')}` }]
            }]"
--- a/ui/src/views/infra/network/IpRangesTabPublic.vue
+++ b/ui/src/views/infra/network/IpRangesTabPublic.vue
@ -117,7 +117,7 @@
      <a-spin :spinning="domainsLoading">
        <div style="margin-bottom: 10px;">
          <div class="list__label">{{ $t('label.account') }}:</div>
-          <a-input v-model="addAccount.account"></a-input>
+          <a-input v-model="addAccount.account" autoFocus></a-input>
        </div>
        <div>
          <div class="list__label">{{ $t('label.domain') }}:</div>
@ -145,6 +145,7 @@
      >
        <a-form-item :label="$t('label.gateway')" class="form__item">
          <a-input
+            autoFocus
            v-decorator="['gateway', { rules: [{ required: true, message: `${$t('label.required')}` }] }]">
          </a-input>
        </a-form-item>
--- a/ui/src/views/infra/network/IpRangesTabStorage.vue
+++ b/ui/src/views/infra/network/IpRangesTabStorage.vue
@ -79,6 +79,7 @@
      >
        <a-form-item :label="$t('label.podid')" class="form__item">
          <a-select
+            autoFocus
            v-decorator="['pod', {
              rules: [{ required: true, message: `${$t('label.required')}` }]
            }]"
--- a/ui/src/views/infra/network/ServiceProvidersTab.vue
+++ b/ui/src/views/infra/network/ServiceProvidersTab.vue
@ -80,6 +80,7 @@
            :label="$t('label.' + field.name)">
            <span v-if="field.name==='password'">
              <a-input-password
+                :autoFocus="index===0"
                v-decorator="[field.name, {
                  rules: [
                    {
@ -92,6 +93,7 @@
            </span>
            <span v-else-if="field.type==='boolean'">
              <a-switch
+                :autoFocus="index===0"
                v-decorator="[field.name, {
                  rules: [{
                    required: field.required,
@ -103,6 +105,7 @@
            </span>
            <span v-else-if="field.type==='uuid'">
              <a-select
+                :autoFocus="index===0"
                v-decorator="[field.name, {
                  rules: [{
                    required: field.required,
@ -118,6 +121,7 @@
            </span>
            <span v-else>
              <a-input
+                :autoFocus="index===0"
                v-decorator="[field.name, {
                  rules: [
                    {
--- a/ui/src/views/infra/network/providers/AddF5LoadBalancer.vue
+++ b/ui/src/views/infra/network/providers/AddF5LoadBalancer.vue
@ -25,6 +25,7 @@
        <a-col :md="24" :lg="24">
          <a-form-item :label="$t('label.ip')">
            <a-input
+              autoFocus
              v-decorator="['ip', {
                rules: [{ required: true, message: $t('message.error.required.input') }]
              }]" />
--- a/ui/src/views/infra/network/providers/AddNetscalerLoadBalancer.vue
+++ b/ui/src/views/infra/network/providers/AddNetscalerLoadBalancer.vue
@ -25,6 +25,7 @@
        <a-col :md="24" :lg="24">
          <a-form-item :label="$t('label.ip')">
            <a-input
+              autoFocus
              v-decorator="['ip', {
                rules: [{ required: true, message: $t('message.error.required.input') }]
              }]" />
--- a/ui/src/views/infra/network/providers/AddNiciraNvpDevice.vue
+++ b/ui/src/views/infra/network/providers/AddNiciraNvpDevice.vue
@ -25,6 +25,7 @@
        <a-col :md="24" :lg="24">
          <a-form-item :label="$t('label.ip')">
            <a-input
+              autoFocus
              v-decorator="['ip', {
                rules: [{ required: true, message: $t('message.error.required.input') }]
              }]" />
--- a/ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue
+++ b/ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue
@ -25,6 +25,7 @@
        <a-col :md="24" :lg="24">
          <a-form-item :label="$t('label.ip')">
            <a-input
+              autoFocus
              v-decorator="['ip', {
                rules: [{ required: true, message: $t('message.error.required.input') }]
              }]" />
--- a/ui/src/views/infra/network/providers/AddSrxFirewall.vue
+++ b/ui/src/views/infra/network/providers/AddSrxFirewall.vue
@ -25,6 +25,7 @@
        <a-col :md="24" :lg="24">
          <a-form-item :label="$t('label.ip')">
            <a-input
+              autoFocus
              v-decorator="['ip', {
                rules: [{ required: true, message: $t('message.error.required.input') }]
              }]" />
--- a/ui/src/views/infra/routers/RouterHealthCheck.vue
+++ b/ui/src/views/infra/routers/RouterHealthCheck.vue
@ -63,7 +63,8 @@
              </span>
              <a-switch
                v-decorator="[$t('performfreshchecks')]"
-                :placeholder="apiParams.performfreshchecks.description" />
+                :placeholder="apiParams.performfreshchecks.description"
+                autoFocus/>
            </a-form-item>
          </a-form>
        </a-spin>
--- a/ui/src/views/infra/zone/AdvancedGuestTrafficForm.vue
+++ b/ui/src/views/infra/zone/AdvancedGuestTrafficForm.vue
@ -46,6 +46,7 @@
              }]
            }]"
            style="width: 100%;"
+            autoFocus
          />
        </a-form-item>
        <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">
--- a/ui/src/views/infra/zone/IpAddressRangeForm.vue
+++ b/ui/src/views/infra/zone/IpAddressRangeForm.vue
@ -42,6 +42,7 @@
                rules: [{ required: true, message: $t('message.error.gateway') }]
              }]"
              :placeholder="$t('label.gateway')"
+              autoFocus
            />
          </a-form-item>
          <a-form-item :style="{ display: 'inline-block', width: '14%' }">
--- a/ui/src/views/infra/zone/StaticInputsForm.vue
+++ b/ui/src/views/infra/zone/StaticInputsForm.vue
@ -45,6 +45,7 @@
            ]
          }]"
          :allowClear="true"
+          :autoFocus="index === 0"
        >
          <a-select-option
            v-for="option in field.options"
@ -58,6 +59,7 @@
          v-else-if="field.switch"
          v-decorator="[field.key]"
          :default-checked="isChecked(field)"
+          :autoFocus="index === 0"
        />
        <a-input
          v-else-if="field.password"
@ -71,6 +73,7 @@
              }
            ]
          }]"
+          :autoFocus="index === 0"
        />
        <a-input
          v-else
@ -89,6 +92,7 @@
              }
            ]
          }]"
+          :autoFocus="index === 0"
        />
      </a-form-item>
    </a-form>
--- a/ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue
+++ b/ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue
@ -29,7 +29,7 @@
      :pagination="false"
      style="margin-bottom: 24px;">
      <template slot="name" slot-scope="text, record">
-        <a-input :value="text" @change="e => onCellChange(record.key, 'name', e.target.value)" />
+        <a-input :value="text" @change="e => onCellChange(record.key, 'name', e.target.value)" autoFocus />
      </template>
      <template slot="isolationMethod" slot-scope="text, record">
        <a-select
--- a/ui/src/views/infra/zone/ZoneWizardZoneDetailsStep.vue
+++ b/ui/src/views/infra/zone/ZoneWizardZoneDetailsStep.vue
@ -35,6 +35,7 @@
              initialValue: name
            }]
          }]"
+          autoFocus
        />
      </a-form-item>
      <a-form-item
--- a/ui/src/views/infra/zone/ZoneWizardZoneTypeStep.vue
+++ b/ui/src/views/infra/zone/ZoneWizardZoneTypeStep.vue
@ -50,6 +50,7 @@
                  v-decorator="['securityGroupsEnabled', { valuePropName: 'checked' }]"
                  :value="securityGroupsEnabled"
                  :disabled="!isAdvancedZone"
+                  autoFocus
                />
              </a-form-item>
              <span>{{ $t('label.menu.security.groups') }}</span>
--- a/ui/src/views/network/AclListRulesTab.vue
+++ b/ui/src/views/network/AclListRulesTab.vue
@ -104,7 +104,9 @@
          <div class="add-tags__input">
            <p class="add-tags__label">{{ $t('label.key') }}</p>
            <a-form-item>
-              <a-input v-decorator="['key', { rules: [{ required: true, message: $t('message.specifiy.tag.key')}] }]" />
+              <a-input
+                autoFocus
+                v-decorator="['key', { rules: [{ required: true, message: $t('message.specifiy.tag.key')}] }]" />
            </a-form-item>
          </div>
          <div class="add-tags__input">
@ -133,7 +135,7 @@
    <a-modal :title="ruleModalTitle" :maskClosable="false" v-model="ruleModalVisible" @ok="handleRuleModalForm">
      <a-form :form="ruleForm" @submit="handleRuleModalForm">
        <a-form-item :label="$t('label.number')">
-          <a-input-number style="width: 100%" v-decorator="['number']" />
+          <a-input-number autoFocus style="width: 100%" v-decorator="['number']" />
        </a-form-item>
        <a-form-item :label="$t('label.cidrlist')">
          <a-input v-decorator="['cidrlist']" />
--- a/ui/src/views/network/CreateIsolatedNetworkForm.vue
+++ b/ui/src/views/network/CreateIsolatedNetworkForm.vue
@ -34,7 +34,8 @@
              v-decorator="['name', {
                rules: [{ required: true, message: $t('message.error.name') }]
              }]"
-              :placeholder="this.$t('label.name')"/>
+              :placeholder="this.$t('label.name')"
+              autoFocus/>
          </a-form-item>
          <a-form-item>
            <span slot="label">
--- a/ui/src/views/network/CreateL2NetworkForm.vue
+++ b/ui/src/views/network/CreateL2NetworkForm.vue
@ -34,7 +34,8 @@
              v-decorator="['name', {
                rules: [{ required: true, message: $t('message.error.name') }]
              }]"
-              :placeholder="this.$t('label.name')"/>
+              :placeholder="this.$t('label.name')"
+              autoFocus/>
          </a-form-item>
          <a-form-item>
            <span slot="label">
--- a/ui/src/views/network/CreateSharedNetworkForm.vue
+++ b/ui/src/views/network/CreateSharedNetworkForm.vue
@ -34,7 +34,8 @@
              v-decorator="['name', {
                rules: [{ required: true, message: $t('message.error.name') }]
              }]"
-              :placeholder="this.$t('label.name')"/>
+              :placeholder="this.$t('label.name')"
+              autoFocus />
          </a-form-item>
          <a-form-item>
            <span slot="label">
--- a/ui/src/views/network/CreateVlanIpRange.vue
+++ b/ui/src/views/network/CreateVlanIpRange.vue
@ -31,6 +31,7 @@
              </a-tooltip>
            </span>
            <a-input
+              autoFocus
              v-decorator="['gateway', {
                rules: [{ required: true, message: $t('message.error.gateway') }]
              }]"
--- a/ui/src/views/network/CreateVpc.vue
+++ b/ui/src/views/network/CreateVpc.vue
@ -31,7 +31,8 @@
            v-decorator="['name', {
              rules: [{ required: true, message: $t('message.error.required.input') }]
            }]"
-            :placeholder="apiParams.name.description"/>
+            :placeholder="apiParams.name.description"
+            autoFocus/>
        </a-form-item>
        <a-form-item>
          <span slot="label">
--- a/ui/src/views/network/CreateVpnCustomerGateway.vue
+++ b/ui/src/views/network/CreateVpnCustomerGateway.vue
@ -31,7 +31,8 @@
              rules: [{ required: true, message: `${$t('label.required')}` }],
            }
          ]"
-          :placeholder="$t('label.vpncustomergatewayname')" />
+          :placeholder="$t('label.vpncustomergatewayname')"
+          autoFocus />
      </a-form-item>
      <a-form-item>
        <span slot="label">
--- a/ui/src/views/network/EgressRulesTab.vue
+++ b/ui/src/views/network/EgressRulesTab.vue
@ -21,7 +21,7 @@
      <div class="form">
        <div class="form__item">
          <div class="form__label">{{ $t('label.sourcecidr') }}</div>
-          <a-input v-model="newRule.cidrlist"></a-input>
+          <a-input v-model="newRule.cidrlist" autoFocus></a-input>
        </div>
        <div class="form__item">
          <div class="form__label">{{ $t('label.destcidr') }}</div>
--- a/ui/src/views/network/EnableStaticNat.vue
+++ b/ui/src/views/network/EnableStaticNat.vue
@ -19,7 +19,11 @@
  <div class="list" :loading="loading">
    <div class="list__header">
      <div class="list__header__col" v-if="tiersSelect">
-        <a-select @change="handleTierSelect" v-model="vpcTiers" :placeholder="$t('label.select.tier')">
+        <a-select
+          autoFocus
+          @change="handleTierSelect"
+          v-model="vpcTiers"
+          :placeholder="$t('label.select.tier')">
          <a-select-option v-for="network in networksList" :key="network.id" :value="network.id">
            {{ network.name }}
          </a-select-option>
--- a/ui/src/views/network/FirewallRules.vue
+++ b/ui/src/views/network/FirewallRules.vue
@ -21,7 +21,7 @@
      <div class="form">
        <div class="form__item">
          <div class="form__label">{{ $t('label.sourcecidr') }}</div>
-          <a-input v-model="newRule.cidrlist"></a-input>
+          <a-input autoFocus v-model="newRule.cidrlist"></a-input>
        </div>
        <div class="form__item">
          <div class="form__label">{{ $t('label.protocol') }}</div>
@ -110,7 +110,7 @@
      <div class="add-tags">
        <div class="add-tags__input">
          <p class="add-tags__label">{{ $t('label.key') }}</p>
-          <a-input v-model="newTag.key"></a-input>
+          <a-input autoFocus v-model="newTag.key"></a-input>
        </div>
        <div class="add-tags__input">
          <p class="add-tags__label">{{ $t('label.value') }}</p>
--- a/ui/src/views/network/IngressEgressRuleConfigure.vue
+++ b/ui/src/views/network/IngressEgressRuleConfigure.vue
@ -30,7 +30,11 @@
      <div class="form">
        <div class="form__item">
          <div class="form__label">{{ $t('label.protocol') }}</div>
-          <a-select v-model="newRule.protocol" style="width: 100%;" @change="resetRulePorts">
+          <a-select
+            autoFocus
+            v-model="newRule.protocol"
+            style="width: 100%;"
+            @change="resetRulePorts">
            <a-select-option value="tcp">{{ $t('label.tcp') | capitalise }}</a-select-option>
            <a-select-option value="udp">{{ $t('label.udp') | capitalise }}</a-select-option>
            <a-select-option value="icmp">{{ $t('label.icmp') | capitalise }}</a-select-option>
@ -127,7 +131,9 @@
          <div class="add-tags__input">
            <p class="add-tags__label">{{ $t('label.key') }}</p>
            <a-form-item>
-              <a-input v-decorator="['key', { rules: [{ required: true, message: this.$t('message.specifiy.tag.key')}] }]" />
+              <a-input
+                autoFocus
+                v-decorator="['key', { rules: [{ required: true, message: this.$t('message.specifiy.tag.key')}] }]" />
            </a-form-item>
          </div>
          <div class="add-tags__input">
--- a/ui/src/views/network/InternalLBAssignVmForm.vue
+++ b/ui/src/views/network/InternalLBAssignVmForm.vue
@ -37,6 +37,7 @@
            </span>
            <a-icon v-if="addVmModalNicLoading" type="loading"></a-icon>
            <a-select
+              :autoFocus="!addVmModalNicLoading && iLb.virtualmachineid[index] === vm.id && index === 0"
              v-else-if="!addVmModalNicLoading && iLb.virtualmachineid[index] === vm.id"
              mode="multiple"
              v-model="iLb.vmguestip[index]"
@ -52,7 +53,10 @@
          <span></span>
          <span>{{ vm.account }}</span>
          <span>{{ vm.zonename }}</span>
-          <a-checkbox :value="vm.id" @change="e => fetchNics(e, index)" />
+          <a-checkbox
+            :autoFocus="!(!addVmModalNicLoading && iLb.virtualmachineid[index] === vm.id) && index === 0"
+            :value="vm.id"
+            @change="e => fetchNics(e, index)" />
        </div>
        <a-divider/>
        <a-pagination
--- a/ui/src/views/network/IpAddressesTab.vue
+++ b/ui/src/views/network/IpAddressesTab.vue
@ -29,6 +29,7 @@
      <div v-if="$route.path.startsWith('/vpc')">
        Select Tier:
        <a-select
+          autoFocus
          style="width: 40%; margin-left: 15px;margin-bottom: 15px"
          :loading="fetchLoading"
          defaultActiveFirstOption
@ -110,6 +111,7 @@
        <a-alert :message="$t('message.action.acquire.ip')" type="warning" />
        <a-form-item :label="$t('label.ipaddress')">
          <a-select
+            autoFocus
            style="width: 100%;"
            showSearch
            v-model="acquireIp">
--- a/ui/src/views/network/LoadBalancing.vue
+++ b/ui/src/views/network/LoadBalancing.vue
@ -21,7 +21,7 @@
      <div class="form">
        <div class="form__item" ref="newRuleName">
          <div class="form__label"><span class="form__required">*</span>{{ $t('label.name') }}</div>
-          <a-input v-model="newRule.name"></a-input>
+          <a-input autoFocus v-model="newRule.name"></a-input>
          <span class="error-text">{{ $t('label.required') }}</span>
        </div>
        <div class="form__item" ref="newRulePublicPort">
@ -154,7 +154,9 @@
        <div class="add-tags__input">
          <p class="add-tags__label">{{ $t('label.key') }}</p>
          <a-form-item>
-            <a-input v-decorator="['key', { rules: [{ required: true, message: this.$t('message.specifiy.tag.key')}] }]" />
+            <a-input
+              autoFocus
+              v-decorator="['key', { rules: [{ required: true, message: this.$t('message.specifiy.tag.key')}] }]" />
          </a-form-item>
        </div>
        <div class="add-tags__input">
@ -193,7 +195,7 @@

      <a-form :form="stickinessPolicyForm" @submit="handleSubmitStickinessForm" class="custom-ant-form">
        <a-form-item :label="$t('label.stickiness.method')">
-          <a-select v-decorator="['methodname']" @change="handleStickinessMethodSelectChange">
+          <a-select autoFocus v-decorator="['methodname']" @change="handleStickinessMethodSelectChange">
            <a-select-option value="LbCookie">{{ $t('label.lb.cookie') }}</a-select-option>
            <a-select-option value="AppCookie">{{ $t('label.app.cookie') }}</a-select-option>
            <a-select-option value="SourceBased">{{ $t('label.source.based') }}</a-select-option>
@ -265,7 +267,7 @@
      <div class="edit-rule" v-if="selectedRule">
        <div class="edit-rule__item">
          <p class="edit-rule__label">{{ $t('label.name') }}</p>
-          <a-input v-model="editRuleDetails.name" />
+          <a-input autoFocus v-model="editRuleDetails.name" />
        </div>
        <div class="edit-rule__item">
          <p class="edit-rule__label">{{ $t('label.algorithm') }}</p>
@ -304,6 +306,7 @@
          v-if="'vpcid' in resource && !('associatednetworkid' in resource)">
          <strong>{{ $t('label.select.tier') }} </strong>
          <a-select
+            :autoFocus="'vpcid' in resource && !('associatednetworkid' in resource)"
            v-model="selectedTier"
            @change="fetchVirtualMachines()"
            :placeholder="$t('label.select.tier')" >
@ -316,6 +319,7 @@
          </a-select>
        </span>
        <a-input-search
+          :autoFocus="!('vpcid' in resource && !('associatednetworkid' in resource))"
          class="input-search"
          :placeholder="$t('label.search')"
          v-model="searchQuery"
--- a/ui/src/views/network/PortForwarding.vue
+++ b/ui/src/views/network/PortForwarding.vue
@ -23,6 +23,7 @@
          <div class="form__label">{{ $t('label.privateport') }}</div>
          <a-input-group class="form__item__input-container" compact>
            <a-input
+              autoFocus
              v-model="newRule.privateport"
              :placeholder="$t('label.start')"
              style="border-right: 0; width: 60px; margin-right: 0;"></a-input>
@ -136,7 +137,7 @@
      <div class="add-tags">
        <div class="add-tags__input">
          <p class="add-tags__label">{{ $t('label.key') }}</p>
-          <a-input v-model="newTag.key"></a-input>
+          <a-input autoFocus v-model="newTag.key"></a-input>
        </div>
        <div class="add-tags__input">
          <p class="add-tags__label">{{ $t('label.value') }}</p>
@ -176,6 +177,7 @@
          v-if="'vpcid' in resource && !('associatednetworkid' in resource)">
          <strong>{{ $t('label.select.tier') }} </strong>
          <a-select
+            :autoFocu="'vpcid' in resource && !('associatednetworkid' in resource)"
            v-model="selectedTier"
            @change="fetchVirtualMachines()"
            :placeholder="$t('label.select.tier')" >
@ -188,6 +190,7 @@
          </a-select>
        </span>
        <a-input-search
+          :autoFocu="!('vpcid' in resource && !('associatednetworkid' in resource))"
          class="input-search"
          :placeholder="$t('label.search')"
          v-model="searchQuery"
--- a/ui/src/views/network/StaticRoutesTab.vue
+++ b/ui/src/views/network/StaticRoutesTab.vue
@ -18,7 +18,7 @@
 <template>
  <a-spin :spinning="componentLoading">
    <div class="new-route">
-      <a-input v-model="newRoute" icon="plus" :placeholder="$t('label.cidr.destination.network')"></a-input>
+      <a-input v-model="newRoute" icon="plus" :placeholder="$t('label.cidr.destination.network')" autoFocus></a-input>
      <a-button type="primary" :disabled="!('createStaticRoute' in $store.getters.apis)" @click="handleAdd">{{ $t('label.add.route') }}</a-button>
    </div>

@ -43,7 +43,9 @@
          <div class="add-tags__input">
            <p class="add-tags__label">{{ $t('label.key') }}</p>
            <a-form-item>
-              <a-input v-decorator="['key', { rules: [{ required: true, message: this.$t('message.specifiy.tag.key')}] }]" />
+              <a-input
+                autoFocus
+                v-decorator="['key', { rules: [{ required: true, message: this.$t('message.specifiy.tag.key')}] }]" />
            </a-form-item>
          </div>
          <div class="add-tags__input">
--- a/ui/src/views/network/VpcTab.vue
+++ b/ui/src/views/network/VpcTab.vue
@ -76,7 +76,9 @@
          @ok="handleNetworkAclFormSubmit">
          <a-form @submit.prevent="handleNetworkAclFormSubmit" :form="networkAclForm">
            <a-form-item :label="$t('label.add.list.name')">
-              <a-input v-decorator="['name', {rules: [{ required: true, message: `${$t('label.required')}` }]}]"></a-input>
+              <a-input
+                v-decorator="['name', {rules: [{ required: true, message: `${$t('label.required')}` }]}]"
+                autoFocus></a-input>
            </a-form-item>
            <a-form-item :label="$t('label.description')">
              <a-input v-decorator="['description', {rules: [{ required: true, message: `${$t('label.required')}` }]}]"></a-input>
@ -131,7 +133,7 @@
            <p>{{ $t('message.add.new.gateway.to.vpc') }}</p>
            <a-form @submit.prevent="handleGatewayFormSubmit" :form="gatewayForm">
              <a-form-item :label="$t('label.physicalnetworkid')">
-                <a-select v-decorator="['physicalnetwork']">
+                <a-select v-decorator="['physicalnetwork']" autoFocus>
                  <a-select-option v-for="item in physicalnetworks" :key="item.id" :value="item.id">
                    {{ item.name }}
                  </a-select-option>
@ -255,7 +257,7 @@
          <a-spin :spinning="modals.vpnConnectionLoading">
            <a-form @submit.prevent="handleVpnConnectionFormSubmit" :form="vpnConnectionForm">
              <a-form-item :label="$t('label.vpncustomergatewayid')">
-                <a-select v-decorator="['vpncustomergateway']">
+                <a-select v-decorator="['vpncustomergateway']" autoFocus>
                  <a-select-option v-for="item in vpncustomergateways" :key="item.id" :value="item.id">
                    {{ item.name }}
                  </a-select-option>
--- a/ui/src/views/network/VpcTiersTab.vue
+++ b/ui/src/views/network/VpcTiersTab.vue
@ -164,7 +164,8 @@
          <a-form-item :label="$t('label.name')">
            <a-input
              :placeholder="$t('label.unique.name.tier')"
-              v-decorator="['name',{rules: [{ required: true, message: `${$t('label.required')}` }]}]"></a-input>
+              v-decorator="['name',{rules: [{ required: true, message: `${$t('label.required')}` }]}]"
+              autoFocus></a-input>
          </a-form-item>
          <a-form-item :label="$t('label.networkofferingid')">
            <a-select
@ -208,6 +209,7 @@
        <a-form @submit.prevent="handleAddInternalLBSubmit" :form="form">
          <a-form-item :label="$t('label.name')">
            <a-input
+              autoFocus
              :placeholder="$t('label.internallb.name.description')"
              v-decorator="['name', { rules: [{ required: true, message: $t('message.error.internallb.name')}] }]"/>
          </a-form-item>
--- a/ui/src/views/offering/AddComputeOffering.vue
+++ b/ui/src/views/offering/AddComputeOffering.vue
@ -30,6 +30,7 @@
            </a-tooltip>
          </span>
          <a-input
+            autoFocus
            v-decorator="['name', {
              rules: [{ required: true, message: $t('message.error.required.input') }]
            }]"
--- a/ui/src/views/offering/AddDiskOffering.vue
+++ b/ui/src/views/offering/AddDiskOffering.vue
@ -30,6 +30,7 @@
            </a-tooltip>
          </span>
          <a-input
+            autoFocus
            v-decorator="['name', {
              rules: [{ required: true, message: $t('message.error.required.input') }]
            }]"
--- a/ui/src/views/offering/AddNetworkOffering.vue
+++ b/ui/src/views/offering/AddNetworkOffering.vue
@ -30,6 +30,7 @@
            </a-tooltip>
          </span>
          <a-input
+            autoFocus
            v-decorator="['name', {
              rules: [{ required: true, message: $t('message.error.name') }]
            }]"
--- a/ui/src/views/offering/AddVpcOffering.vue
+++ b/ui/src/views/offering/AddVpcOffering.vue
@ -30,6 +30,7 @@
            </a-tooltip>
          </span>
          <a-input
+            autoFocus
            v-decorator="['name', {
              rules: [{ required: true, message: $t('message.error.name') }]
            }]"
--- a/ui/src/views/offering/ImportBackupOffering.vue
+++ b/ui/src/views/offering/ImportBackupOffering.vue
@ -29,6 +29,7 @@
          </a-tooltip>
        </span>
        <a-input
+          autoFocus
          v-decorator="['name', {
            rules: [{ required: true, message: $t('message.error.required.input') }]
          }]"/>
--- a/ui/src/views/offering/UpdateOfferingAccess.vue
+++ b/ui/src/views/offering/UpdateOfferingAccess.vue
@ -29,6 +29,7 @@

        <a-form-item :label="$t('label.domainid')" v-if="!this.offeringIsPublic">
          <a-select
+            :autoFocus="!this.offeringIsPublic"
            mode="multiple"
            v-decorator="['domainid', {
              rules: [
@ -54,6 +55,7 @@

        <a-form-item :label="$t('label.zoneid')">
          <a-select
+            :autoFocus="this.offeringIsPublic"
            id="zone-selection"
            mode="multiple"
            v-decorator="['zoneid', {
--- a/ui/src/views/plugins/quota/EditTariffValueWizard.vue
+++ b/ui/src/views/plugins/quota/EditTariffValueWizard.vue
@ -36,6 +36,7 @@
      @submit="submitTariff">
      <a-form-item :label="$t('label.quota.value')">
        <a-input
+          autoFocus
          v-decorator="['value', {
            rules: [{
              required: true,
--- a/ui/src/views/project/AddAccountOrUserToProject.vue
+++ b/ui/src/views/project/AddAccountOrUserToProject.vue
@ -31,7 +31,8 @@
            </span>
            <a-input
              v-decorator="['account']"
-              :placeholder="apiParams.addAccountToProject.account.description"/>
+              :placeholder="apiParams.addAccountToProject.account.description"
+              autoFocus />
          </a-form-item>
          <a-form-item>
            <span slot="label">
@ -100,7 +101,8 @@
            </span>
            <a-input
              v-decorator="['username']"
-              :placeholder="apiParams.addUserToProject.username.description"/>
+              :placeholder="apiParams.addUserToProject.username.description"
+              autoFocus />
          </a-form-item>
          <a-form-item>
            <span slot="label">
--- a/ui/src/views/project/InvitationTokenTemplate.vue
+++ b/ui/src/views/project/InvitationTokenTemplate.vue
@ -28,6 +28,7 @@
              rules: [{ required: true, message: `${this.$t('message.error.required.input')}` }]
            }]"
            :placeholder="apiParams.projectid.description"
+            autoFocus
          />
        </a-form-item>
        <a-form-item :label="$t('label.token')">
--- a/ui/src/views/project/InvitationsTemplate.vue
+++ b/ui/src/views/project/InvitationsTemplate.vue
@ -24,7 +24,8 @@
          style="width: unset"
          :placeholder="$t('label.search')"
          v-model="searchQuery"
-          @search="onSearch" />
+          @search="onSearch"
+          autoFocus />
      </a-col>
      <a-col :md="24" :lg="24">
        <a-table
--- a/ui/src/views/project/iam/ProjectRoleTab.vue
+++ b/ui/src/views/project/iam/ProjectRoleTab.vue
@ -72,10 +72,10 @@
            @submit="updateProjectRole"
            layout="vertical">
            <a-form-item :label="$t('label.name')">
-              <a-input v-decorator="[ 'name' ]"></a-input>
+              <a-input v-decorator="['name']" autoFocus></a-input>
            </a-form-item>
            <a-form-item :label="$t('label.description')">
-              <a-input v-decorator="[ 'description' ]"></a-input>
+              <a-input v-decorator="['description']"></a-input>
            </a-form-item>
            <div :span="24" class="action-button">
              <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
@ -119,7 +119,9 @@
            @submit="createProjectRole"
            layout="vertical">
            <a-form-item :label="$t('label.name')">
-              <a-input v-decorator="[ 'name', { rules: [{ required: true, message: 'Please provide input' }] }]"></a-input>
+              <a-input
+                v-decorator="[ 'name', { rules: [{ required: true, message: 'Please provide input' }] }]"
+                autoFocus></a-input>
            </a-form-item>
            <a-form-item :label="$t('label.description')">
              <a-input v-decorator="[ 'description' ]"></a-input>
--- a/ui/src/views/storage/AttachVolume.vue
+++ b/ui/src/views/storage/AttachVolume.vue
@ -25,6 +25,7 @@
      </div>
      <a-form-item :label="$t('label.virtualmachineid')">
        <a-select
+          autoFocus
          v-decorator="['virtualmachineid', {
            rules: [{ required: true, message: $t('message.error.select') }]
          }]"
--- a/ui/src/views/storage/CreateSnapshotFromVMSnapshot.vue
+++ b/ui/src/views/storage/CreateSnapshotFromVMSnapshot.vue
@ -20,6 +20,7 @@
    <a-form class="form" :form="form" @submit="handleSubmit" layout="vertical">
      <a-form-item :label="$t('label.name')">
        <a-input
+          autoFocus
          v-decorator="['name', {
            rules: [{ required: true, message: $t('message.error.name') }]
          }]"
--- a/ui/src/views/storage/CreateVolume.vue
+++ b/ui/src/views/storage/CreateVolume.vue
@ -29,7 +29,8 @@
          v-decorator="['name', {
            rules: [{ required: true, message: $t('message.error.volume.name') }]
          }]"
-          :placeholder="$t('label.volumename')"/>
+          :placeholder="$t('label.volumename')"
+          autoFocus />
      </a-form-item>
      <a-form-item>
        <span slot="label">
--- a/ui/src/views/storage/FormSchedule.vue
+++ b/ui/src/views/storage/FormSchedule.vue
@ -61,7 +61,8 @@
                      rules: [{required: true, message: `${this.$t('message.error.required.input')}`}]
                    }]"
                    :min="1"
-                    :max="59"/>
+                    :max="59"
+                    autoFocus />
                </a-tooltip>
              </a-form-item>
            </a-col>
--- a/ui/src/views/storage/MigrateVolume.vue
+++ b/ui/src/views/storage/MigrateVolume.vue
@ -23,7 +23,10 @@
          <span slot="message" v-html="$t('message.migrate.volume')" />
        </a-alert>
        <p class="modal-form__label">{{ $t('label.storagepool') }}</p>
-        <a-select v-model="selectedStoragePool" style="width: 100%;">
+        <a-select
+          v-model="selectedStoragePool"
+          style="width: 100%;"
+          :autoFocus="storagePools.length > 0">
          <a-select-option v-for="(storagePool, index) in storagePools" :value="storagePool.id" :key="index">
            {{ storagePool.name }} <span v-if="resource.virtualmachineid">{{ storagePool.suitableformigration ? `(${$t('label.suitable')})` : `(${$t('label.not.suitable')})` }}</span>
          </a-select-option>
--- a/ui/src/views/storage/ResizeVolume.vue
+++ b/ui/src/views/storage/ResizeVolume.vue
@ -26,6 +26,7 @@
          :loading="loading"
          :placeholder="$t('label.diskoffering')"
          @change="id => (customDiskOffering = offerings.filter(x => x.id === id)[0].iscustomized || false)"
+          :autoFocus="resource.type !== 'ROOT'"
        >
          <a-select-option
            v-for="(offering, index) in offerings"
@ -39,7 +40,8 @@
          <a-input
            v-decorator="['size', {
              rules: [{ required: true, message: $t('message.error.size') }]}]"
-            :placeholder="$t('label.disksize')"/>
+            :placeholder="$t('label.disksize')"
+            :autoFocus="customDiskOffering || resource.type === 'ROOT'"/>
        </a-form-item>
      </div>
      <a-form-item :label="$t('label.shrinkok')">
--- a/ui/src/views/storage/RestoreAttachBackupVolume.vue
+++ b/ui/src/views/storage/RestoreAttachBackupVolume.vue
@ -24,7 +24,8 @@
          v-decorator="['volumeid', {
            rules: [{ required: true, message: `${this.$t('message.error.select')}` }]
          }]"
-          :loading="volumeOptions.loading">
+          :loading="volumeOptions.loading"
+          autoFocus>
          <a-select-option
            v-for="(opt) in volumeOptions.opts"
            :key="opt.id">
--- a/Show More
+++ b/Show More