Skip to content

Commit 6428780

Browse files
author
Hoang Nguyen
authored
ui: Auto-focus input, form (#4762)
* autofocus into the first element (form/dialog) * add autofocus missing * add autofocus to missing elements
1 parent 9717669 commit 6428780

102 files changed

Lines changed: 257 additions & 90 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 () {
@@ -756,6 +763,7 @@ export default {
756763
})
757764
}
758765
}
766+
this.getFirstIndexFocus()
759767
760768
this.showAction = true
761769
for (const param of this.currentAction.paramFields) {
@@ -771,6 +779,16 @@ export default {
771779
this.fillEditFormFieldValues()
772780
}
773781
},
782+
getFirstIndexFocus () {
783+
this.firstIndex = 0
784+
for (let fieldIndex = 0; fieldIndex < this.currentAction.paramFields.length; fieldIndex++) {
785+
const field = this.currentAction.paramFields[fieldIndex]
786+
if (!(this.currentAction.mapping && field.name in this.currentAction.mapping && this.currentAction.mapping[field.name].value)) {
787+
this.firstIndex = fieldIndex
788+
break
789+
}
790+
}
791+
},
774792
listUuidOpts (param) {
775793
if (this.currentAction.mapping && param.name in this.currentAction.mapping && !this.currentAction.mapping[param.name].api) {
776794
return

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

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

3030
<div class="form__item">
3131
<p class="form__label">{{ $t('label.accounttype') }}</p>
32-
<a-select v-model="selectedAccountType" defaultValue="account">
32+
<a-select v-model="selectedAccountType" defaultValue="account" autoFocus>
3333
<a-select-option :value="$t('label.account')">{{ $t('label.account') }}</a-select-option>
3434
<a-select-option :value="$t('label.project')">{{ $t('label.project') }}</a-select-option>
3535
</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
@@ -479,6 +480,7 @@
479480
v-if="vm.templateid && ['KVM', 'VMware'].includes(hypervisor) && !template.deployasis">
480481
<a-form-item :label="$t('label.boottype')">
481482
<a-select
483+
:autoFocus="vm.templateid && ['KVM', 'VMware'].includes(hypervisor) && !template.deployasis"
482484
v-decorator="['boottype']"
483485
@change="fetchBootModes"
484486
>

0 commit comments

Comments
 (0)