Merge pull request #11731 from rak-phillip/bugfix/11723-number-input

Revert Refactoring the plain element <input> data bindings
rancher · Aug 27, 2024 · 27f34bc · 27f34bc
2 parents 76ee305 + b68adb3
commit 27f34bc
Show file tree

Hide file tree

Showing 12 changed files with 27 additions and 33 deletions.
diff --git 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
@@ -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
@@ -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
@@ -728,15 +728,15 @@ export default {
               />
               <input
                 v-else
-                :value="row[valueName]"
+                v-model="row[valueName]"
                 :disabled="isView || disabled || isProtected(row.key)"
                 :type="valueConcealed ? 'password' : 'text'"
                 :placeholder="_valuePlaceholder"
                 autocorrect="off"
                 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
@@ -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
@@ -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
@@ -183,23 +183,23 @@ 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">
           <span v-if="isView">{{ row.port }}</span>
           <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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"