From 19b8da290c2733be688b4771d8b1c08edd96876f Mon Sep 17 00:00:00 2001
From: dahn <daan.hoogland@shapeblue.com>
Date: Wed, 23 Feb 2022 16:51:44 +0100
Subject: [PATCH] prevent <ctrl>-<enter> handler from <space> from toggling
 checkboxes (#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>
---
 ui/src/views/image/RegisterOrUploadIso.vue    |   4 +-
 .../views/image/RegisterOrUploadTemplate.vue  |   5 +-
 ui/src/views/network/LoadBalancing.vue        | 180 +++++++++---------
 ui/src/views/offering/AddNetworkOffering.vue  |   2 +-
 ui/src/views/offering/AddVpcOffering.vue      |   2 +-
 5 files changed, 99 insertions(+), 94 deletions(-)

diff --git a/ui/src/views/image/RegisterOrUploadIso.vue b/ui/src/views/image/RegisterOrUploadIso.vue
index e4ab9703e7f..eaff52fb473 100644
--- a/ui/src/views/image/RegisterOrUploadIso.vue
+++ b/ui/src/views/image/RegisterOrUploadIso.vue
@@ -16,7 +16,9 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div
+    class="form-layout"
+    @keyup.ctrl.enter="handleSubmit">
     <span v-if="uploadPercentage > 0">
       <a-icon type="loading" />
       {{ $t('message.upload.file.processing') }}
diff --git a/ui/src/views/image/RegisterOrUploadTemplate.vue b/ui/src/views/image/RegisterOrUploadTemplate.vue
index c4116019d4f..43e8288be53 100644
--- a/ui/src/views/image/RegisterOrUploadTemplate.vue
+++ b/ui/src/views/image/RegisterOrUploadTemplate.vue
@@ -16,7 +16,9 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div
+    class="form-layout"
+    @keyup.ctrl.enter="handleSubmit">
     <span v-if="uploadPercentage > 0">
       <a-icon type="loading" />
       {{ $t('message.upload.file.processing') }}
@@ -24,7 +26,6 @@
     </span>
     <a-spin :spinning="loading" v-else>
       <a-form
-        v-ctrl-enter="handleSubmit"
         :form="form"
         @submit="handleSubmit"
         layout="vertical">
diff --git a/ui/src/views/network/LoadBalancing.vue b/ui/src/views/network/LoadBalancing.vue
index ed6e3f2538c..a9d16bc3292 100644
--- a/ui/src/views/network/LoadBalancing.vue
+++ b/ui/src/views/network/LoadBalancing.vue
@@ -17,7 +17,7 @@
 
 <template>
   <div>
-    <div v-ctrl-enter="handleOpenAddVMModal">
+    <div @keyup.ctrl.enter="handleOpenAddVMModal">
       <div class="form">
         <div class="form__item" ref="newRuleName">
           <div class="form__label"><span class="form__required">*</span>{{ $t('label.name') }}</div>
@@ -346,105 +346,107 @@
       </div>
     </a-modal>
 
-    <a-modal
-      :title="$t('label.add.vms')"
-      :maskClosable="false"
-      :closable="true"
-      v-model="addVmModalVisible"
-      class="vm-modal"
-      width="60vw"
-      :footer="null"
-      v-ctrl-enter="handleAddNewRule"
-    >
-      <div>
-        <span
-          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')"
-            showSearch
-            optionFilterProp="children"
-            :filterOption="(input, option) => {
-              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }" >
-            <a-select-option
-              v-for="tier in tiers.data"
-              :loading="tiers.loading"
-              :key="tier.id">
-              {{ tier.displaytext }}
-            </a-select-option>
-          </a-select>
-        </span>
-        <a-input-search
-          :autoFocus="!('vpcid' in resource && !('associatednetworkid' in resource))"
-          class="input-search"
-          :placeholder="$t('label.search')"
-          v-model="searchQuery"
-          allowClear
-          @search="onSearch" />
-        <a-table
-          size="small"
-          class="list-view"
-          :loading="addVmModalLoading"
-          :columns="vmColumns"
-          :dataSource="vms"
-          :pagination="false"
-          :rowKey="record => record.id"
-          :scroll="{ y: 300 }">
-          <div slot="name" slot-scope="text, record, index">
-            <span>
-              {{ text }}
-            </span>
-            <a-icon v-if="addVmModalNicLoading" type="loading"></a-icon>
+    <div
+      @keyup.ctrl.enter="handleAddNewRule">
+      <a-modal
+        :title="$t('label.add.vms')"
+        :maskClosable="false"
+        :closable="true"
+        v-model="addVmModalVisible"
+        class="vm-modal"
+        width="60vw"
+        :footer="null"
+      >
+        <div>
+          <span
+            v-if="'vpcid' in resource && !('associatednetworkid' in resource)">
+            <strong>{{ $t('label.select.tier') }} </strong>
             <a-select
-              style="display: block"
-              v-else-if="!addVmModalNicLoading && newRule.virtualmachineid[index] === record.id"
-              mode="multiple"
-              v-model="newRule.vmguestip[index]"
+              :autoFocus="'vpcid' in resource && !('associatednetworkid' in resource)"
+              v-model="selectedTier"
+              @change="fetchVirtualMachines()"
+              :placeholder="$t('label.select.tier')"
               showSearch
               optionFilterProp="children"
               :filterOption="(input, option) => {
                 return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }" >
-              <a-select-option v-for="(nic, nicIndex) in nics[index]" :key="nic" :value="nic">
-                {{ nic }}{{ nicIndex === 0 ? ` (${$t('label.primary')})` : null }}
+              <a-select-option
+                v-for="tier in tiers.data"
+                :loading="tiers.loading"
+                :key="tier.id">
+                {{ tier.displaytext }}
               </a-select-option>
             </a-select>
-          </div>
+          </span>
+          <a-input-search
+            :autoFocus="!('vpcid' in resource && !('associatednetworkid' in resource))"
+            class="input-search"
+            :placeholder="$t('label.search')"
+            v-model="searchQuery"
+            allowClear
+            @search="onSearch" />
+          <a-table
+            size="small"
+            class="list-view"
+            :loading="addVmModalLoading"
+            :columns="vmColumns"
+            :dataSource="vms"
+            :pagination="false"
+            :rowKey="record => record.id"
+            :scroll="{ y: 300 }">
+            <div slot="name" slot-scope="text, record, index">
+              <span>
+                {{ text }}
+              </span>
+              <a-icon v-if="addVmModalNicLoading" type="loading"></a-icon>
+              <a-select
+                style="display: block"
+                v-else-if="!addVmModalNicLoading && newRule.virtualmachineid[index] === record.id"
+                mode="multiple"
+                v-model="newRule.vmguestip[index]"
+                showSearch
+                optionFilterProp="children"
+                :filterOption="(input, option) => {
+                  return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                }" >
+                <a-select-option v-for="(nic, nicIndex) in nics[index]" :key="nic" :value="nic">
+                  {{ nic }}{{ nicIndex === 0 ? ` (${$t('label.primary')})` : null }}
+                </a-select-option>
+              </a-select>
+            </div>
 
-          <div slot="state" slot-scope="text">
-            <status :text="text ? text : ''" displayText></status>
-          </div>
+            <div slot="state" slot-scope="text">
+              <status :text="text ? text : ''" displayText></status>
+            </div>
 
-          <div slot="action" slot-scope="text, record, index" style="text-align: center">
-            <a-checkbox :value="record.id" @change="e => fetchNics(e, index)" />
-          </div>
-        </a-table>
-        <a-pagination
-          class="pagination"
-          size="small"
-          :current="vmPage"
-          :pageSize="vmPageSize"
-          :total="vmCount"
-          :showTotal="total => `${$t('label.total')} ${total} ${$t('label.items')}`"
-          :pageSizeOptions="['10', '20', '40', '80', '100']"
-          @change="handleChangeVmPage"
-          @showSizeChange="handleChangeVmPageSize"
-          showSizeChanger>
-          <template slot="buildOptionText" slot-scope="props">
-            <span>{{ props.value }} / {{ $t('label.page') }}</span>
-          </template>
-        </a-pagination>
-      </div>
+            <div slot="action" slot-scope="text, record, index" style="text-align: center">
+              <a-checkbox :value="record.id" @change="e => fetchNics(e, index)" />
+            </div>
+          </a-table>
+          <a-pagination
+            class="pagination"
+            size="small"
+            :current="vmPage"
+            :pageSize="vmPageSize"
+            :total="vmCount"
+            :showTotal="total => `${$t('label.total')} ${total} ${$t('label.items')}`"
+            :pageSizeOptions="['10', '20', '40', '80', '100']"
+            @change="handleChangeVmPage"
+            @showSizeChange="handleChangeVmPageSize"
+            showSizeChanger>
+            <template slot="buildOptionText" slot-scope="props">
+              <span>{{ props.value }} / {{ $t('label.page') }}</span>
+            </template>
+          </a-pagination>
+        </div>
 
-      <div :span="24" class="action-button">
-        <a-button @click="closeModal">{{ $t('label.cancel') }}</a-button>
-        <a-button :disabled="newRule.virtualmachineid === []" type="primary" @click="handleAddNewRule">{{ $t('label.ok') }}</a-button>
-      </div>
-    </a-modal>
+        <div :span="24" class="action-button">
+          <a-button @click="closeModal">{{ $t('label.cancel') }}</a-button>
+          <a-button :disabled="newRule.virtualmachineid === []" type="primary" @click="handleAddNewRule">{{ $t('label.ok') }}</a-button>
+        </div>
+      </a-modal>
+    </div>
 
     <bulk-action-view
       v-if="showConfirmationAction || showGroupActionModal"
diff --git a/ui/src/views/offering/AddNetworkOffering.vue b/ui/src/views/offering/AddNetworkOffering.vue
index d114ceb269f..b5ab62578de 100644
--- a/ui/src/views/offering/AddNetworkOffering.vue
+++ b/ui/src/views/offering/AddNetworkOffering.vue
@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout" v-ctrl-enter="handleSubmit">
+  <div class="form-layout" @keyup.ctrl.enter="handleSubmit">
     <a-spin :spinning="loading">
       <a-form
         :form="form"
diff --git a/ui/src/views/offering/AddVpcOffering.vue b/ui/src/views/offering/AddVpcOffering.vue
index 51a40652292..34c1f011d4c 100644
--- a/ui/src/views/offering/AddVpcOffering.vue
+++ b/ui/src/views/offering/AddVpcOffering.vue
@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout" v-ctrl-enter="handleSubmit">
+  <div class="form-layout" @keyup.ctrl.enter="handleSubmit">
     <a-spin :spinning="loading">
       <a-form
         :form="form"