Refactor DatePicker component to improve validation behavior

assurance-maladie-digital · Oct 15, 2024 · c2f3de4 · c2f3de4
1 parent 76b56fc
commit c2f3de4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/packages/synapse-bridge/src/patterns/DatePicker/DatePicker.vue b/packages/synapse-bridge/src/patterns/DatePicker/DatePicker.vue
@@ -9,7 +9,6 @@ import { vMaska } from 'maska'
 import {
 	type ComponentPublicInstance,
 	defineComponent,
-	nextTick,
 	type PropType,
 } from 'vue'
 import { VTextField } from 'vuetify/lib/components/index.mjs'
@@ -172,6 +171,13 @@ export default defineComponent({
 				this.calendarValue = [start.toDate(), end.toDate()]
 			}
 		},
+		rules() {
+			if (this.calendarValue) {
+				this.$nextTick(() => {
+					this.updateMessages()
+				})
+			}
+		},
 	},
 	methods: {
 		toggleCalendar() {
@@ -195,7 +201,9 @@ export default defineComponent({
 		},
 		handleFocusChange(focus: boolean) {
 			if (!focus) {
-				this.updateMessages()
+				setTimeout(() => {
+					this.updateMessages()
+				}, 200) // avoid graphical glitch when the calendar is closed
 			} else {
 				if (this.textFieldActivator || this.noIcon) {
 					if (!this.$refs.calendar) return
@@ -217,7 +225,7 @@ export default defineComponent({
 			if (!textField) return
 
 			this.validateWarning(this.internalValue)
-			await nextTick()
+			await this.$nextTick()
 			this.errorMessages = await textField.validate()
 		},
 		handleTextInput(date: string, updateCalendar: (s: string) => void) {

diff --git a/packages/synapse-bridge/src/patterns/DatePicker/config.ts b/packages/synapse-bridge/src/patterns/DatePicker/config.ts
@@ -2,7 +2,7 @@ export const config = {
 	textField: {
 		hideDetails: 'auto',
 		persistentHint: true,
-		validateOn: 'blur',
+		validateOn: 'submit',
 		color: '#0C419A',
 		maxErrors: 5,
 	},