From 0ab024c603c70b685600cc0381c7c3169ce72ba0 Mon Sep 17 00:00:00 2001
From: Alexandre Alves <97888974+aalves08@users.noreply.github.com>
Date: Wed, 23 Aug 2023 09:25:08 +0100
Subject: [PATCH] Resource Quota up-and-down input doesn't update the value on
 the request quota object to be sent

* add @change event to capture arrow presses on firefox

* address pr comments

---------

Co-authored-by: Alexandre Alves <aalves@Alexandres-MBP.lan>
Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
(cherry picked from commit ac72cd8359f537341889928385a17266c33fabdc)
---
 .../src/components/Form/LabeledInput/LabeledInput.vue     | 8 ++++++++
 shell/components/form/UnitInput.vue                       | 1 +
 shell/components/form/__tests__/UnitInput.test.ts         | 4 ++--
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/pkg/rancher-components/src/components/Form/LabeledInput/LabeledInput.vue b/pkg/rancher-components/src/components/Form/LabeledInput/LabeledInput.vue
index 9d84100f10a..c4bd59177ac 100644
--- a/pkg/rancher-components/src/components/Form/LabeledInput/LabeledInput.vue
+++ b/pkg/rancher-components/src/components/Form/LabeledInput/LabeledInput.vue
@@ -206,6 +206,13 @@ export default (
       }
     },
 
+    /**
+     * Emit on input change
+     */
+    onChange(event: Event): void {
+      this.$emit('change', event);
+    },
+
     /**
      * Emit on input with delay. Note: Arrow function is avoided due context
      * binding.
@@ -299,6 +306,7 @@ export default (
         @input="onInput($event.target.value)"
         @focus="onFocus"
         @blur="onBlur"
+        @change="onChange"
       >
     </slot>
 
diff --git a/shell/components/form/UnitInput.vue b/shell/components/form/UnitInput.vue
index 8d5ee02a8e7..69be29e1764 100644
--- a/shell/components/form/UnitInput.vue
+++ b/shell/components/form/UnitInput.vue
@@ -233,6 +233,7 @@ export default {
     :required="required"
     :placeholder="placeholder"
     :hide-arrows="hideArrows"
+    @change="update($event.target.value)"
     @blur="update($event.target.value)"
   >
     <template #suffix>
diff --git a/shell/components/form/__tests__/UnitInput.test.ts b/shell/components/form/__tests__/UnitInput.test.ts
index 357adfecf82..da4cab3b1f1 100644
--- a/shell/components/form/__tests__/UnitInput.test.ts
+++ b/shell/components/form/__tests__/UnitInput.test.ts
@@ -10,13 +10,13 @@ describe('component: UnitInput', () => {
     expect(wrapper.isVisible()).toBe(true);
   });
 
-  it('should emit input event on value change', async() => {
+  it.each(['blur', 'change'])('should emit input event when "%p" is fired', async(event) => {
     const wrapper = mount(UnitInput, { propsData: { value: 1, delay: 0 } });
     const input = wrapper.find('input');
 
     await input.setValue(2);
     await input.setValue(4);
-    input.trigger('blur');
+    input.trigger(event);
 
     expect(wrapper.emitted('input')).toHaveLength(1);
   });