From 5f670c92b28973cf83d49bfcac2f9e473485158a Mon Sep 17 00:00:00 2001
From: Savas Vedova <svedova@gitlab.com>
Date: Mon, 21 Feb 2022 20:32:43 +0300
Subject: [PATCH] Improve form user experience
- Emit changes on input rather than blur
---
.../components/new_vulnerability/section_identifiers.vue | 4 ++--
.../components/new_vulnerability/section_name.vue | 4 ++--
.../new_vulnerability/section_identifiers_spec.js | 5 ++++-
3 files changed, 8 insertions(+), 5 deletions(-)
diff --git a/ee/app/assets/javascripts/vulnerabilities/components/new_vulnerability/section_identifiers.vue b/ee/app/assets/javascripts/vulnerabilities/components/new_vulnerability/section_identifiers.vue
index 21871c57fba2..ec5c233b1f81 100644
--- a/ee/app/assets/javascripts/vulnerabilities/components/new_vulnerability/section_identifiers.vue
+++ b/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
diff --git a/ee/app/assets/javascripts/vulnerabilities/components/new_vulnerability/section_name.vue b/ee/app/assets/javascripts/vulnerabilities/components/new_vulnerability/section_name.vue
index 9a7d0d71bd0c..fc70e5cde040 100644
--- a/ee/app/assets/javascripts/vulnerabilities/components/new_vulnerability/section_name.vue
+++ b/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>
diff --git a/ee/spec/frontend/vulnerabilities/new_vulnerability/section_identifiers_spec.js b/ee/spec/frontend/vulnerabilities/new_vulnerability/section_identifiers_spec.js
index 8f23e109742b..c33b3160fcff 100644
--- a/ee/spec/frontend/vulnerabilities/new_vulnerability/section_identifiers_spec.js
+++ b/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' }],
});
});
--
GitLab