Merge branch '352128-improvements-vuln-form' into 'master'

Improve form user experience

See merge request gitlab-org/gitlab!81172

ee/app/assets/javascripts/vulnerabilities/components/new_vulnerability/section_identifiers.vue

@@ -96,7 +96,7 @@ export default {
           v-model.trim="identifier.identifierCode"
           :state="validationStateIdentifierCode(index)"
           type="text"
-          @change="emitChanges"
+          @input="emitChanges"
         />
       </gl-form-group>
       <gl-form-group
@@ -111,7 +111,7 @@ export default {
           v-model.trim="identifier.identifierUrl"
           :state="validationStateIdentifierUrl(index)"
           type="text"
-          @change="emitChanges"
+          @input="emitChanges"
         />
       </gl-form-group>
       <gl-button

ee/app/assets/javascripts/vulnerabilities/components/new_vulnerability/section_name.vue

@@ -66,7 +66,7 @@ export default {
         v-model.trim="vulnerabilityName"
         :state="validationState.name"
         type="text"
-        @change="emitChanges"
+        @input="emitChanges"
       />
     </gl-form-group>
     <gl-form-group
@@ -93,7 +93,7 @@ export default {
               class="gl-shadow-none! gl-px-0! gl-py-4! gl-h-auto!"
               :aria-label="$options.i18n.vulnerabilityDesc.description"
               :placeholder="$options.i18n.vulnerabilityDesc.description"
-              @change="emitChanges"
+              @input="emitChanges"
             />
           </template>
         </markdown-field>

ee/spec/frontend/vulnerabilities/new_vulnerability/section_identifiers_spec.js

@@ -62,9 +62,12 @@ describe('New vulnerability - Section Identifiers', () => {
 
     codeInput.setValue('cve-23');
     urlInput.setValue('https://gitlab.com');
-    codeInput.trigger('change');
 
     expect(wrapper.emitted('change')[0][0]).toEqual({
+      identifiers: [{ name: 'cve-23', url: '' }],
+    });
+
+    expect(wrapper.emitted('change')[1][0]).toEqual({
       identifiers: [{ name: 'cve-23', url: 'https://gitlab.com' }],
     });
   });