Resource Quota up-and-down input doesn't update the value on the requ…

…est 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 ac72cd8)

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>
 

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>

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);
   });