Skip to content

Commit d998f27

Browse files
author
utchoang
committed
autofocus into the first element (form/dialog)
1 parent 3a82392 commit d998f27

99 files changed

Lines changed: 250 additions & 86 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎ui/src/components/view/ListResourceTable.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@
2222
style="width: 25vw;float: right;margin-bottom: 10px; z-index: 8"
2323
:placeholder="$t('label.search')"
2424
v-model="filter"
25-
@search="handleSearch" />
25+
@search="handleSearch"
26+
autoFocus />
2627

2728
<a-table
2829
size="small"

‎ui/src/components/view/ResourceLimitTab.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
v-decorator="[item.resourcetype, {
3535
initialValue: item.max
3636
}]"
37+
:autoFocus="index === 0"
3738
/>
3839
</a-form-item>
3940
<div class="card-footer">

‎ui/src/views/AutogenView.vue‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@
173173
}]"
174174
v-model="formModel[field.name]"
175175
:placeholder="field.description"
176-
:autoFocus="fieldIndex === 0"
176+
:autoFocus="fieldIndex === firstIndex"
177177
/>
178178
</span>
179179
<span v-else-if="currentAction.mapping && field.name in currentAction.mapping && currentAction.mapping[field.name].options">
@@ -183,6 +183,7 @@
183183
rules: [{ required: field.required, message: `${$t('message.error.select')}` }]
184184
}]"
185185
:placeholder="field.description"
186+
:autoFocus="fieldIndex === firstIndex"
186187
>
187188
<a-select-option key="" >{{ }}</a-select-option>
188189
<a-select-option v-for="(opt, optIndex) in currentAction.mapping[field.name].options" :key="optIndex">
@@ -204,6 +205,7 @@
204205
:filterOption="(input, option) => {
205206
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
206207
}"
208+
:autoFocus="fieldIndex === firstIndex"
207209
>
208210
<a-select-option key="">{{ }}</a-select-option>
209211
<a-select-option v-for="(opt, optIndex) in field.opts" :key="optIndex">
@@ -224,6 +226,7 @@
224226
:filterOption="(input, option) => {
225227
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
226228
}"
229+
:autoFocus="fieldIndex === firstIndex"
227230
>
228231
<a-select-option key="">{{ }}</a-select-option>
229232
<a-select-option v-for="opt in field.opts" :key="opt.id">
@@ -239,6 +242,7 @@
239242
rules: [{ required: field.required, message: `${$t('message.error.select')}` }]
240243
}]"
241244
:placeholder="field.description"
245+
:autoFocus="fieldIndex === firstIndex"
242246
>
243247
<a-select-option v-for="(opt, optIndex) in field.opts" :key="optIndex">
244248
{{ opt.name && opt.type ? opt.name + ' (' + opt.type + ')' : opt.name || opt.description }}
@@ -247,7 +251,7 @@
247251
</span>
248252
<span v-else-if="field.type==='long'">
249253
<a-input-number
250-
:autoFocus="fieldIndex === 0"
254+
:autoFocus="fieldIndex === firstIndex"
251255
style="width: 100%;"
252256
v-decorator="[field.name, {
253257
rules: [{ required: field.required, message: `${$t('message.validate.number')}` }]
@@ -270,6 +274,7 @@
270274
}]"
271275
:placeholder="field.description"
272276
@blur="($event) => handleConfirmBlur($event, field.name)"
277+
:autoFocus="fieldIndex === firstIndex"
273278
/>
274279
</span>
275280
<span v-else-if="field.name==='certificate' || field.name==='privatekey' || field.name==='certchain'">
@@ -279,11 +284,12 @@
279284
rules: [{ required: field.required, message: `${$t('message.error.required.input')}` }]
280285
}]"
281286
:placeholder="field.description"
287+
:autoFocus="fieldIndex === firstIndex"
282288
/>
283289
</span>
284290
<span v-else>
285291
<a-input
286-
:autoFocus="fieldIndex === 0"
292+
:autoFocus="fieldIndex === firstIndex"
287293
v-decorator="[field.name, {
288294
rules: [{ required: field.required, message: `${$t('message.error.required.input')}` }]
289295
}]"
@@ -394,7 +400,8 @@ export default {
394400
searchParams: {},
395401
actions: [],
396402
formModel: {},
397-
confirmDirty: false
403+
confirmDirty: false,
404+
firstIndex: 0
398405
}
399406
},
400407
beforeCreate () {
@@ -748,6 +755,7 @@ export default {
748755
})
749756
}
750757
}
758+
this.getFirstIndexFocus()
751759
752760
this.showAction = true
753761
for (const param of this.currentAction.paramFields) {
@@ -763,6 +771,16 @@ export default {
763771
this.fillEditFormFieldValues()
764772
}
765773
},
774+
getFirstIndexFocus () {
775+
this.firstIndex = 0
776+
for (let fieldIndex = 0; fieldIndex < this.currentAction.paramFields.length; fieldIndex++) {
777+
const field = this.currentAction.paramFields[fieldIndex]
778+
if (!(this.currentAction.mapping && field.name in this.currentAction.mapping && this.currentAction.mapping[field.name].value)) {
779+
this.firstIndex = fieldIndex
780+
break
781+
}
782+
}
783+
},
766784
listUuidOpts (param) {
767785
if (this.currentAction.mapping && param.name in this.currentAction.mapping && !this.currentAction.mapping[param.name].api) {
768786
return

‎ui/src/views/compute/AssignInstance.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727

2828
<div class="form__item">
2929
<p class="form__label">{{ $t('label.accounttype') }}</p>
30-
<a-select v-model="selectedAccountType" defaultValue="account">
30+
<a-select v-model="selectedAccountType" defaultValue="account" autoFocus>
3131
<a-select-option :value="$t('label.account')">{{ $t('label.account') }}</a-select-option>
3232
<a-select-option :value="$t('label.project')">{{ $t('label.project') }}</a-select-option>
3333
</a-select>

‎ui/src/views/compute/AttachIso.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@
2626
v-decorator="['id', {
2727
initialValue: this.selectedIso,
2828
rules: [{ required: true, message: `${this.$t('label.required')}`}]
29-
}]" >
29+
}]"
30+
autoFocus>
3031
<a-select-option v-for="iso in isos" :key="iso.id">
3132
{{ iso.displaytext || iso.name }}
3233
</a-select-option>

‎ui/src/views/compute/ChangeAffinity.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@
2929
style="margin-bottom: 10px;"
3030
:placeholder="$t('label.search')"
3131
v-model="filter"
32-
@search="handleSearch" />
32+
@search="handleSearch"
33+
autoFocus />
3334
</div>
3435

3536
<div class="form__item">

‎ui/src/views/compute/CreateKubernetesCluster.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,8 @@
3333
v-decorator="['name', {
3434
rules: [{ required: true, message: $t('message.error.kubecluster.name') }]
3535
}]"
36-
:placeholder="apiParams.name.description"/>
36+
:placeholder="apiParams.name.description"
37+
autoFocus />
3738
</a-form-item>
3839
<a-form-item>
3940
<span slot="label">

‎ui/src/views/compute/CreateSSHKeyPair.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@
2828
v-decorator="['name', {
2929
rules: [{ required: true, message: $t('message.error.name') }]
3030
}]"
31-
:placeholder="apiParams.name.description"/>
31+
:placeholder="apiParams.name.description"
32+
autoFocus />
3233
</a-form-item>
3334
<a-form-item :label="$t('label.publickey')">
3435
<a-input

‎ui/src/views/compute/CreateSnapshotWizard.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,8 @@
3636
rules: [{ required: true, message: $t('message.error.select') }]
3737
}]"
3838
@change="onChangeVolume"
39-
:placeholder="apiParams.volumeid.description">
39+
:placeholder="apiParams.volumeid.description"
40+
autoFocus>
4041
<a-select-option
4142
v-for="volume in listVolumes"
4243
:key="volume.id">

‎ui/src/views/compute/DeployVM.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
:options="zoneSelectOptions"
4242
@change="onSelectZoneId"
4343
:loading="loading.zones"
44+
autoFocus
4445
></a-select>
4546
</a-form-item>
4647
<a-form-item
@@ -477,6 +478,7 @@
477478
v-if="vm.templateid && ['KVM', 'VMware'].includes(hypervisor) && !template.deployasis">
478479
<a-form-item :label="$t('label.boottype')">
479480
<a-select
481+
:autoFocus="vm.templateid && ['KVM', 'VMware'].includes(hypervisor) && !template.deployasis"
480482
v-decorator="['boottype']"
481483
@change="fetchBootModes"
482484
>

0 commit comments

Comments
 (0)