✨ vue-dot: Handle enter key press in DatePicker (#1648)

assurance-maladie-digital · Dec 8, 2021 · 2704190 · 2704190
1 parent 4174305
commit 2704190
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,7 +4,8 @@
 
 - ✨ **Nouvelles fonctionnalités**
   - **HeaderBar:** Ajout d'un lien vers la page d'accueil sur le logo ([#1612](https://github.com/assurance-maladie-digital/design-system/pull/1612)) ([3f26bbd](https://github.com/assurance-maladie-digital/design-system/commit/3f26bbd928de6c591e72a1b614a633758242bf4b))
-  - **DatePicker:** Ajout de la gestion du copier/coller ([#1647](https://github.com/assurance-maladie-digital/design-system/pull/1647))
+  - **DatePicker:** Ajout de la gestion du copier/coller ([#1647](https://github.com/assurance-maladie-digital/design-system/pull/1647)) ([4174305](https://github.com/assurance-maladie-digital/design-system/commit/417430545c22eeac16c02b84cb2ef986164a9c7c))
+  - **DatePicker:** Ajout de la gestion de l'appui sur la touche *Entrée* ([#1648](https://github.com/assurance-maladie-digital/design-system/pull/1648))
 
 - 🐛 **Corrections de bugs**
   - **Logo:** Correction du logo Risque Pro ([#1641](https://github.com/assurance-maladie-digital/design-system/pull/1641)) ([c678ffa](https://github.com/assurance-maladie-digital/design-system/commit/c678ffa04fe15cd760055c0887486383cdfba729))

diff --git a/packages/vue-dot/src/patterns/DatePicker/DatePicker.vue b/packages/vue-dot/src/patterns/DatePicker/DatePicker.vue
@@ -21,6 +21,7 @@
 				@blur="textFieldBlur"
 				@click="textFieldClicked"
 				@paste.prevent="saveFromPasted"
+				@keydown.enter.prevent="saveFromTextField"
 			>
 				<template #prepend>
 					<VBtn

diff --git a/packages/vue-dot/src/patterns/DatePicker/mixins/dateLogic.ts b/packages/vue-dot/src/patterns/DatePicker/mixins/dateLogic.ts
@@ -223,6 +223,11 @@ export class DateLogic extends MixinsDeclaration {
 
 		const formatted = this.parseTextFieldDate(this.textFieldDate);
 
+		// Don't clear the value if the date is invalid
+		if (!formatted) {
+			return;
+		}
+
 		// Set the internal date
 		this.date = formatted;
 

diff --git a/packages/vue-dot/src/patterns/DatePicker/mixins/tests/dateLogic.spec.ts b/packages/vue-dot/src/patterns/DatePicker/mixins/tests/dateLogic.spec.ts
@@ -132,14 +132,26 @@ describe('DateLogic', () => {
 		expect(wrapper.vm.date).toBe('2019-10-29');
 	});
 
-	it('emits change event with empty value when the date is invalid', () => {
+	it('emits change event with empty value when saveFromTextField and the date is invalid in initial state', () => {
 		const wrapper = createWrapper({
 			value: '29-10-2019'
 		});
 
 		wrapper.vm.saveFromTextField();
 
-		expect(wrapper.emitted('change')).toEqual([['']]);
+		expect(wrapper.emitted('change')).toBeTruthy();
+	});
+
+	it('does not emit change event when saveFromTextField is called and value is invalid', async() => {
+		const wrapper = createWrapper();
+
+		await wrapper.setData({
+			textFieldDate: '2019/'
+		});
+
+		wrapper.vm.saveFromTextField();
+
+		expect(wrapper.emitted('change')).toBeFalsy();
 	});
 
 	// parseTextFieldDate