🐛 vue-dot: Use input event instead of change for v-model in NirField (#…

…3413)
assurance-maladie-digital · Mar 5, 2024 · efc6935 · efc6935
1 parent 4f5361f
commit efc6935
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 8 deletions.
diff --git a/packages/docs/src/data/api/nir-field.ts b/packages/docs/src/data/api/nir-field.ts
@@ -37,9 +37,14 @@ export const api: Api = {
 		],
 		events: [
 			{
-				name: 'change',
+				name: 'input',
 				description: 'Événement émis lorsque la valeur est mise à jour.',
 				value: 'string'
+			},
+			{
+				name: 'change',
+				description: 'Événement émis lorsque tous les champs sont complétés.',
+				value: 'string'
 			}
 		]
 	}

diff --git a/packages/vue-dot/src/patterns/NirField/NirField.vue b/packages/vue-dot/src/patterns/NirField/NirField.vue
@@ -128,12 +128,17 @@
 		inheritAttrs: false,
 		model: {
 			prop: 'value',
-			event: 'change'
+			event: 'input'
 		},
 		watch: {
 			value: {
 				handler(value: string | null) {
 					if (!value) {
+						this.numberValue = null;
+						this.keyValue = null;
+						this.numberErrors = [];
+						this.keyErrors = [];
+
 						return;
 					}
 
@@ -145,12 +150,6 @@
 						this.numberValue = value.slice(0, -KEY_LENGTH);
 						this.keyValue = value.slice(NUMBER_LENGTH, NUMBER_LENGTH + KEY_LENGTH);
 					}
-
-					this.validateNumberValue();
-
-					if (!this.isSingleField) {
-						this.validateKeyValue();
-					}
 				},
 				immediate: true
 			}
@@ -202,6 +201,7 @@
 
 		setNumberValue(event: InputFacadeEvent): void {
 			this.numberValue = event.target?.unmaskedValue ?? null;
+			this.emitInputEvent();
 		}
 
 		get keyFilled(): boolean {
@@ -262,6 +262,7 @@
 
 		setKeyValue(event: InputFacadeEvent): void {
 			this.keyValue = event.target?.unmaskedValue ?? null;
+			this.emitInputEvent();
 		}
 
 		get computedNumberValue(): string | null {
@@ -280,6 +281,13 @@
 			return this.numberValue as string + this.keyValue as string;
 		}
 
+		get rawInternalValue(): string | null {
+			const numberValue = this.numberValue ?? '';
+			const keyValue = this.keyValue ?? '';
+
+			return numberValue + keyValue;
+		}
+
 		get isSingleField(): boolean {
 			return this.nirLength === FieldTypesEnum.SINGLE;
 		}
@@ -318,6 +326,10 @@
 
 			this.$emit('change', this.internalValue);
 		}
+
+		emitInputEvent(): void {
+			this.$emit('input', this.rawInternalValue);
+		}
 	}
 </script>