From b68adb383314637fccce4ff74abf231b441767f6 Mon Sep 17 00:00:00 2001
From: Phillip Rak <rak.phillip@gmail.com>
Date: Tue, 27 Aug 2024 15:38:19 -0700
Subject: [PATCH] Revert "Refactoring the plain element <input> data bindings"

This reverts commit 7f1536d9cff20b73b8b42a703886f170a50fda5f.

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>
---
 .../Form/LabeledInput/LabeledInput.vue           |  2 +-
 shell/components/SortableTable/index.vue         |  6 ++----
 shell/components/auth/RoleDetailEdit.vue         |  4 ++--
 shell/components/form/KeyValue.vue               |  4 ++--
 shell/components/form/MatchExpressions.vue       |  4 ++--
 shell/components/form/Ports.vue                  |  8 ++++----
 shell/components/form/ServicePorts.vue           | 16 ++++++++--------
 shell/components/nav/TopLevelMenu.vue            |  3 +--
 .../nav/WindowManager/ContainerLogs.vue          |  3 +--
 shell/dialog/ForceMachineRemoveDialog.vue        |  3 +--
 .../edit/networking.k8s.io.ingress/RulePath.vue  |  4 ++--
 shell/edit/token.vue                             |  3 +--
 12 files changed, 27 insertions(+), 33 deletions(-)

diff --git a/pkg/rancher-components/src/components/Form/LabeledInput/LabeledInput.vue b/pkg/rancher-components/src/components/Form/LabeledInput/LabeledInput.vue
index 13ce401759c..4ee769b0078 100644
--- a/pkg/rancher-components/src/components/Form/LabeledInput/LabeledInput.vue
+++ b/pkg/rancher-components/src/components/Form/LabeledInput/LabeledInput.vue
@@ -347,7 +347,7 @@ export default defineComponent({
         autocomplete="off"
         autocapitalize="off"
         :data-lpignore="ignorePasswordManagers"
-        @input="($plainInputEvent) => onInput($plainInputEvent)"
+        @input="onInput"
         @focus="onFocus"
         @blur="onBlur"
         @change="onChange"
diff --git a/shell/components/SortableTable/index.vue b/shell/components/SortableTable/index.vue
index 1b12d08753a..7c7e139f434 100644
--- a/shell/components/SortableTable/index.vue
+++ b/shell/components/SortableTable/index.vue
@@ -1136,11 +1136,10 @@ export default {
             >
               <input
                 ref="advancedSearchQuery"
-                :value="advFilterSearchTerm"
+                v-model="advFilterSearchTerm"
                 type="search"
                 class="advanced-search-box"
                 :placeholder="t('sortableTable.filterFor')"
-                @input="($plainInputEvent) => advFilterSearchTerm = $plainInputEvent.target.value"
               >
               <div class="middle-block">
                 <span>{{ t('sortableTable.in') }}</span>
@@ -1178,11 +1177,10 @@ export default {
           <input
             v-else-if="search"
             ref="searchQuery"
-            :value="eventualSearchQuery"
+            v-model="eventualSearchQuery"
             type="search"
             class="input-sm search-box"
             :placeholder="t('sortableTable.search')"
-            @input="($plainInputEvent) => eventualSearchQuery = $plainInputEvent.target.value"
           >
           <slot name="header-button" />
         </div>
diff --git a/shell/components/auth/RoleDetailEdit.vue b/shell/components/auth/RoleDetailEdit.vue
index 7d2c0e57344..858c87ccf45 100644
--- a/shell/components/auth/RoleDetailEdit.vue
+++ b/shell/components/auth/RoleDetailEdit.vue
@@ -730,7 +730,7 @@ export default {
                     :disabled="isBuiltin"
                     :mode="mode"
                     :data-testid="`grant-resources-api-groups${props.i}`"
-                    @input="($plainInputEvent) => setRule('apiGroups', props.row.value, $plainInputEvent.target.value)"
+                    @input="setRule('apiGroups', props.row.value, $event.target.value)"
                   >
                 </div>
                 <div
@@ -742,7 +742,7 @@ export default {
                     :disabled="isBuiltin"
                     :mode="mode"
                     :data-testid="`grant-resources-non-resource-urls${props.i}`"
-                    @input="($plainInputEvent) => setRule('nonResourceURLs', props.row.value, $plainInputEvent.target.value)"
+                    @input="setRule('nonResourceURLs', props.row.value, $event.target.value)"
                   >
                 </div>
               </div>
diff --git a/shell/components/form/KeyValue.vue b/shell/components/form/KeyValue.vue
index 185b3f0a315..eb256c40be1 100644
--- a/shell/components/form/KeyValue.vue
+++ b/shell/components/form/KeyValue.vue
@@ -728,7 +728,7 @@ export default {
               />
               <input
                 v-else
-                :value="row[valueName]"
+                v-model="row[valueName]"
                 :disabled="isView || disabled || isProtected(row.key)"
                 :type="valueConcealed ? 'password' : 'text'"
                 :placeholder="_valuePlaceholder"
@@ -736,7 +736,7 @@ export default {
                 autocapitalize="off"
                 spellcheck="false"
                 :data-testid="`input-kv-item-value-${i}`"
-                @input="($plainInputEvent) => queueUpdate($plainInputEvent)"
+                @input="queueUpdate"
               >
               <FileSelector
                 v-if="parseValueFromFile && readAllowed && !isView && isValueFieldEmpty(row[valueName])"
diff --git a/shell/components/form/MatchExpressions.vue b/shell/components/form/MatchExpressions.vue
index ad24b60c560..37448407759 100644
--- a/shell/components/form/MatchExpressions.vue
+++ b/shell/components/form/MatchExpressions.vue
@@ -346,11 +346,11 @@ export default {
         </div>
         <input
           v-else
-          :value="row.values"
+          v-model="row.values"
           :mode="mode"
           :disabled="row.operator==='Exists' || row.operator==='DoesNotExist'"
           :data-testid="`input-match-expression-values-control-${index}`"
-          @input="($plainInputEvent) => update($plainInputEvent)"
+          @input="update"
         >
       </div>
       <div
diff --git a/shell/components/form/Ports.vue b/shell/components/form/Ports.vue
index e638ea82299..95a1292adec 100644
--- a/shell/components/form/Ports.vue
+++ b/shell/components/form/Ports.vue
@@ -156,12 +156,12 @@ export default {
             <input
               v-else
               ref="port"
-              :value="row.port"
+              v-model.number="row.port"
               type="number"
               min="1"
               max="65535"
               placeholder="e.g. 8080"
-              @input="($plainInputEvent) => queueUpdate($plainInputEvent)"
+              @input="queueUpdate"
             >
           </td>
           <td class="protocol">
@@ -195,12 +195,12 @@ export default {
             <span v-if="isView">{{ row.targetPort }}</span>
             <input
               v-else
-              :value="row.targetPort"
+              v-model.number="row.targetPort"
               type="number"
               min="1"
               max="65535"
               placeholder="e.g. 80"
-              @input="($plainInputEvent) => queueUpdate($plainInputEvent)"
+              @input="queueUpdate"
             >
           </td>
           <td class="expose">
diff --git a/shell/components/form/ServicePorts.vue b/shell/components/form/ServicePorts.vue
index e2400d5f7e3..4788c9ef58b 100644
--- a/shell/components/form/ServicePorts.vue
+++ b/shell/components/form/ServicePorts.vue
@@ -183,10 +183,10 @@ export default {
           <input
             v-else
             ref="port-name"
-            :value="row.name"
+            v-model.number="row.name"
             type="text"
             :placeholder="t('servicePorts.rules.name.placeholder')"
-            @input="($plainInputEvent) => queueUpdate($plainInputEvent)"
+            @input="queueUpdate"
           >
         </div>
         <div class="port">
@@ -194,12 +194,12 @@ export default {
           <input
             v-else
             ref="port"
-            :value="row.port"
+            v-model.number="row.port"
             type="number"
             min="1"
             max="65535"
             :placeholder="t('servicePorts.rules.listening.placeholder')"
-            @input="($plainInputEvent) => queueUpdate($plainInputEvent)"
+            @input="queueUpdate"
           >
         </div>
         <div
@@ -218,9 +218,9 @@ export default {
           <span v-if="isView">{{ row.targetPort }}</span>
           <input
             v-else
-            :value="row.targetPort"
+            v-model="row.targetPort"
             :placeholder="t('servicePorts.rules.target.placeholder')"
-            @input="($plainInputEvent) => queueUpdate($plainInputEvent)"
+            @input="queueUpdate"
           >
         </div>
         <div
@@ -230,12 +230,12 @@ export default {
           <span v-if="isView">{{ row.nodePort }}</span>
           <input
             v-else
-            :value="row.nodePort"
+            v-model.number="row.nodePort"
             type="number"
             min="1"
             max="65535"
             :placeholder="t('servicePorts.rules.node.placeholder')"
-            @input="($plainInputEvent) => queueUpdate($plainInputEvent)"
+            @input="queueUpdate"
           >
         </div>
         <div
diff --git a/shell/components/nav/TopLevelMenu.vue b/shell/components/nav/TopLevelMenu.vue
index afcb500f7fa..5a320bb49e4 100644
--- a/shell/components/nav/TopLevelMenu.vue
+++ b/shell/components/nav/TopLevelMenu.vue
@@ -527,9 +527,8 @@ export default {
               >
                 <input
                   ref="clusterFilter"
-                  :value="clusterFilter"
+                  v-model="clusterFilter"
                   :placeholder="t('nav.search.placeholder')"
-                  @input="($plainInputEvent) => clusterFilter = $plainInputEvent.target.value"
                 >
                 <i
                   class="magnifier icon icon-search"
diff --git a/shell/components/nav/WindowManager/ContainerLogs.vue b/shell/components/nav/WindowManager/ContainerLogs.vue
index f2bc33cde49..094ae6d08ad 100644
--- a/shell/components/nav/WindowManager/ContainerLogs.vue
+++ b/shell/components/nav/WindowManager/ContainerLogs.vue
@@ -646,11 +646,10 @@ export default {
 
         <div class="log-action log-action-group ml-5">
           <input
-            :value="search"
+            v-model="search"
             class="input-sm"
             type="search"
             :placeholder="t('wm.containerLogs.search')"
-            @input="($plainInputEvent) => search = $plainInputEvent.target.value"
           >
         </div>
 
diff --git a/shell/dialog/ForceMachineRemoveDialog.vue b/shell/dialog/ForceMachineRemoveDialog.vue
index 6b09a8237d4..19a5ffa6f78 100644
--- a/shell/dialog/ForceMachineRemoveDialog.vue
+++ b/shell/dialog/ForceMachineRemoveDialog.vue
@@ -90,9 +90,8 @@ export default {
         </div>
         <input
           id="confirm"
-          :value="confirmName"
+          v-model="confirmName"
           type="text"
-          @input="($plainInputEvent) => confirmName = $plainInputEvent"
         >
         <div class="text-info mt-20">
           {{ protip }}
diff --git a/shell/edit/networking.k8s.io.ingress/RulePath.vue b/shell/edit/networking.k8s.io.ingress/RulePath.vue
index 1cb82eabc6c..06c8fe025ba 100644
--- a/shell/edit/networking.k8s.io.ingress/RulePath.vue
+++ b/shell/edit/networking.k8s.io.ingress/RulePath.vue
@@ -129,9 +129,9 @@ export default {
     >
       <input
         ref="first"
-        :value="path"
+        v-model="path"
         :placeholder="t('ingress.rules.path.placeholder', undefined, true)"
-        @input="($plainInputEvent) => {path = $plainInputEvent.target.value; queueUpdate($plainInputEvent);}"
+        @input="queueUpdate"
       >
     </div>
     <div
diff --git a/shell/edit/token.vue b/shell/edit/token.vue
index f95fab5fbb3..1b183abea5b 100644
--- a/shell/edit/token.vue
+++ b/shell/edit/token.vue
@@ -206,11 +206,10 @@ export default {
         />
         <div class="ml-20 mt-10 expiry">
           <input
-            :value="form.customExpiry"
+            v-model="form.customExpiry"
             :disabled="form.expiryType !== 'custom'"
             type="number"
             :mode="mode"
-            @input="($plainInputEvent) => form.customExpiry = $plainInputEvent"
           >
           <Select
             v-model:value="form.customExpiryUnits"