Skip to content

Commit 19b8da2

Browse files
DaanHooglandDaan Hoogland
DaanHoogland
and
Daan Hoogland
authored
prevent <ctrl>-<enter> handler from <space> from toggling checkboxes (apache#6027)
* prevent <ctrl>-<enter> handler from <space> from toggling checkboxes * enter vs ctrl-enter issue remaining: toggles active switch on submit * some fixes by hook on containing div * other identified forms Co-authored-by: Daan Hoogland <dahn@onecht.net>
1 parent ca12ef3 commit 19b8da2

File tree

5 files changed

+99
-94
lines changed

5 files changed

+99
-94
lines changed

‎ui/src/views/image/RegisterOrUploadIso.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@
1616
// under the License.
1717

1818
<template>
19-
<div class="form-layout">
19+
<div
20+
class="form-layout"
21+
@keyup.ctrl.enter="handleSubmit">
2022
<span v-if="uploadPercentage > 0">
2123
<a-icon type="loading" />
2224
{{ $t('message.upload.file.processing') }}

‎ui/src/views/image/RegisterOrUploadTemplate.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,16 @@
1616
// under the License.
1717

1818
<template>
19-
<div class="form-layout">
19+
<div
20+
class="form-layout"
21+
@keyup.ctrl.enter="handleSubmit">
2022
<span v-if="uploadPercentage > 0">
2123
<a-icon type="loading" />
2224
{{ $t('message.upload.file.processing') }}
2325
<a-progress :percent="uploadPercentage" />
2426
</span>
2527
<a-spin :spinning="loading" v-else>
2628
<a-form
27-
v-ctrl-enter="handleSubmit"
2829
:form="form"
2930
@submit="handleSubmit"
3031
layout="vertical">

‎ui/src/views/network/LoadBalancing.vue‎

Lines changed: 91 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717

1818
<template>
1919
<div>
20-
<div v-ctrl-enter="handleOpenAddVMModal">
20+
<div @keyup.ctrl.enter="handleOpenAddVMModal">
2121
<div class="form">
2222
<div class="form__item" ref="newRuleName">
2323
<div class="form__label"><span class="form__required">*</span>{{ $t('label.name') }}</div>
@@ -346,105 +346,107 @@
346346
</div>
347347
</a-modal>
348348

349-
<a-modal
350-
:title="$t('label.add.vms')"
351-
:maskClosable="false"
352-
:closable="true"
353-
v-model="addVmModalVisible"
354-
class="vm-modal"
355-
width="60vw"
356-
:footer="null"
357-
v-ctrl-enter="handleAddNewRule"
358-
>
359-
<div>
360-
<span
361-
v-if="'vpcid' in resource && !('associatednetworkid' in resource)">
362-
<strong>{{ $t('label.select.tier') }} </strong>
363-
<a-select
364-
:autoFocus="'vpcid' in resource && !('associatednetworkid' in resource)"
365-
v-model="selectedTier"
366-
@change="fetchVirtualMachines()"
367-
:placeholder="$t('label.select.tier')"
368-
showSearch
369-
optionFilterProp="children"
370-
:filterOption="(input, option) => {
371-
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
372-
}" >
373-
<a-select-option
374-
v-for="tier in tiers.data"
375-
:loading="tiers.loading"
376-
:key="tier.id">
377-
{{ tier.displaytext }}
378-
</a-select-option>
379-
</a-select>
380-
</span>
381-
<a-input-search
382-
:autoFocus="!('vpcid' in resource && !('associatednetworkid' in resource))"
383-
class="input-search"
384-
:placeholder="$t('label.search')"
385-
v-model="searchQuery"
386-
allowClear
387-
@search="onSearch" />
388-
<a-table
389-
size="small"
390-
class="list-view"
391-
:loading="addVmModalLoading"
392-
:columns="vmColumns"
393-
:dataSource="vms"
394-
:pagination="false"
395-
:rowKey="record => record.id"
396-
:scroll="{ y: 300 }">
397-
<div slot="name" slot-scope="text, record, index">
398-
<span>
399-
{{ text }}
400-
</span>
401-
<a-icon v-if="addVmModalNicLoading" type="loading"></a-icon>
349+
<div
350+
@keyup.ctrl.enter="handleAddNewRule">
351+
<a-modal
352+
:title="$t('label.add.vms')"
353+
:maskClosable="false"
354+
:closable="true"
355+
v-model="addVmModalVisible"
356+
class="vm-modal"
357+
width="60vw"
358+
:footer="null"
359+
>
360+
<div>
361+
<span
362+
v-if="'vpcid' in resource && !('associatednetworkid' in resource)">
363+
<strong>{{ $t('label.select.tier') }} </strong>
402364
<a-select
403-
style="display: block"
404-
v-else-if="!addVmModalNicLoading && newRule.virtualmachineid[index] === record.id"
405-
mode="multiple"
406-
v-model="newRule.vmguestip[index]"
365+
:autoFocus="'vpcid' in resource && !('associatednetworkid' in resource)"
366+
v-model="selectedTier"
367+
@change="fetchVirtualMachines()"
368+
:placeholder="$t('label.select.tier')"
407369
showSearch
408370
optionFilterProp="children"
409371
:filterOption="(input, option) => {
410372
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
411373
}" >
412-
<a-select-option v-for="(nic, nicIndex) in nics[index]" :key="nic" :value="nic">
413-
{{ nic }}{{ nicIndex === 0 ? ` (${$t('label.primary')})` : null }}
374+
<a-select-option
375+
v-for="tier in tiers.data"
376+
:loading="tiers.loading"
377+
:key="tier.id">
378+
{{ tier.displaytext }}
414379
</a-select-option>
415380
</a-select>
416-
</div>
381+
</span>
382+
<a-input-search
383+
:autoFocus="!('vpcid' in resource && !('associatednetworkid' in resource))"
384+
class="input-search"
385+
:placeholder="$t('label.search')"
386+
v-model="searchQuery"
387+
allowClear
388+
@search="onSearch" />
389+
<a-table
390+
size="small"
391+
class="list-view"
392+
:loading="addVmModalLoading"
393+
:columns="vmColumns"
394+
:dataSource="vms"
395+
:pagination="false"
396+
:rowKey="record => record.id"
397+
:scroll="{ y: 300 }">
398+
<div slot="name" slot-scope="text, record, index">
399+
<span>
400+
{{ text }}
401+
</span>
402+
<a-icon v-if="addVmModalNicLoading" type="loading"></a-icon>
403+
<a-select
404+
style="display: block"
405+
v-else-if="!addVmModalNicLoading && newRule.virtualmachineid[index] === record.id"
406+
mode="multiple"
407+
v-model="newRule.vmguestip[index]"
408+
showSearch
409+
optionFilterProp="children"
410+
:filterOption="(input, option) => {
411+
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
412+
}" >
413+
<a-select-option v-for="(nic, nicIndex) in nics[index]" :key="nic" :value="nic">
414+
{{ nic }}{{ nicIndex === 0 ? ` (${$t('label.primary')})` : null }}
415+
</a-select-option>
416+
</a-select>
417+
</div>
417418

418-
<div slot="state" slot-scope="text">
419-
<status :text="text ? text : ''" displayText></status>
420-
</div>
419+
<div slot="state" slot-scope="text">
420+
<status :text="text ? text : ''" displayText></status>
421+
</div>
421422

422-
<div slot="action" slot-scope="text, record, index" style="text-align: center">
423-
<a-checkbox :value="record.id" @change="e => fetchNics(e, index)" />
424-
</div>
425-
</a-table>
426-
<a-pagination
427-
class="pagination"
428-
size="small"
429-
:current="vmPage"
430-
:pageSize="vmPageSize"
431-
:total="vmCount"
432-
:showTotal="total => `${$t('label.total')} ${total} ${$t('label.items')}`"
433-
:pageSizeOptions="['10', '20', '40', '80', '100']"
434-
@change="handleChangeVmPage"
435-
@showSizeChange="handleChangeVmPageSize"
436-
showSizeChanger>
437-
<template slot="buildOptionText" slot-scope="props">
438-
<span>{{ props.value }} / {{ $t('label.page') }}</span>
439-
</template>
440-
</a-pagination>
441-
</div>
423+
<div slot="action" slot-scope="text, record, index" style="text-align: center">
424+
<a-checkbox :value="record.id" @change="e => fetchNics(e, index)" />
425+
</div>
426+
</a-table>
427+
<a-pagination
428+
class="pagination"
429+
size="small"
430+
:current="vmPage"
431+
:pageSize="vmPageSize"
432+
:total="vmCount"
433+
:showTotal="total => `${$t('label.total')} ${total} ${$t('label.items')}`"
434+
:pageSizeOptions="['10', '20', '40', '80', '100']"
435+
@change="handleChangeVmPage"
436+
@showSizeChange="handleChangeVmPageSize"
437+
showSizeChanger>
438+
<template slot="buildOptionText" slot-scope="props">
439+
<span>{{ props.value }} / {{ $t('label.page') }}</span>
440+
</template>
441+
</a-pagination>
442+
</div>
442443

443-
<div :span="24" class="action-button">
444-
<a-button @click="closeModal">{{ $t('label.cancel') }}</a-button>
445-
<a-button :disabled="newRule.virtualmachineid === []" type="primary" @click="handleAddNewRule">{{ $t('label.ok') }}</a-button>
446-
</div>
447-
</a-modal>
444+
<div :span="24" class="action-button">
445+
<a-button @click="closeModal">{{ $t('label.cancel') }}</a-button>
446+
<a-button :disabled="newRule.virtualmachineid === []" type="primary" @click="handleAddNewRule">{{ $t('label.ok') }}</a-button>
447+
</div>
448+
</a-modal>
449+
</div>
448450

449451
<bulk-action-view
450452
v-if="showConfirmationAction || showGroupActionModal"

‎ui/src/views/offering/AddNetworkOffering.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
// under the License.
1717

1818
<template>
19-
<div class="form-layout" v-ctrl-enter="handleSubmit">
19+
<div class="form-layout" @keyup.ctrl.enter="handleSubmit">
2020
<a-spin :spinning="loading">
2121
<a-form
2222
:form="form"

‎ui/src/views/offering/AddVpcOffering.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
// under the License.
1717

1818
<template>
19-
<div class="form-layout" v-ctrl-enter="handleSubmit">
19+
<div class="form-layout" @keyup.ctrl.enter="handleSubmit">
2020
<a-spin :spinning="loading">
2121
<a-form
2222
:form="form"

0 commit comments

Comments
 (0)