@cnamts/synapse 1.0.23 → 1.0.24

package/src/components/Customs/Selects/SyAutocomplete/tests/SyAutocomplete.spec.ts

@@ -183,6 +183,149 @@ describe('SyAutocomplete', () => {
 		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([null])
 	})
 
+	it('removes chip when Enter key is pressed on chip close button', async () => {
+		wrapper.unmount()
+		wrapper = mount(SyAutocomplete, {
+			props: {
+				modelValue: [items[0]!, items[1]!],
+				items,
+				multiple: true,
+				chips: true,
+				returnObject: true,
+				label: 'Test Chips Keyboard',
+				textKey: 'text',
+				valueKey: 'value',
+			},
+			attachTo: document.body,
+		})
+
+		await wrapper.vm.$nextTick()
+		const closeBtn = wrapper.find('.v-chip__close')
+		closeBtn.element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }))
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+		// First item was removed — remaining is [items[1]]
+		const emitted = wrapper.emitted('update:modelValue')?.[0]?.[0] as unknown[]
+		expect(emitted).toHaveLength(1)
+		expect((emitted[0] as { value: string }).value).toBe('2')
+	})
+
+	it('removes chip when Space key is pressed on chip close button', async () => {
+		wrapper.unmount()
+		wrapper = mount(SyAutocomplete, {
+			props: {
+				modelValue: [items[0]!, items[1]!],
+				items,
+				multiple: true,
+				chips: true,
+				returnObject: true,
+				label: 'Test Chips Space',
+				textKey: 'text',
+				valueKey: 'value',
+			},
+			attachTo: document.body,
+		})
+
+		await wrapper.vm.$nextTick()
+		const closeBtn = wrapper.find('.v-chip__close')
+		closeBtn.element.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true, cancelable: true }))
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+		const emitted = wrapper.emitted('update:modelValue')?.[0]?.[0] as unknown[]
+		expect(emitted).toHaveLength(1)
+	})
+
+	it('does not open menu when modelValue is set programmatically (suppressMenuOpen)', async () => {
+		// Menu must be closed initially
+		expect(isMenuOverlayActive()).toBe(false)
+
+		// Programmatic update (e.g., filter reset sets a value) should NOT open the menu
+		await wrapper.setProps({ modelValue: items[0] })
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		expect(isMenuOverlayActive()).toBe(false)
+	})
+
+	it('keeps menu open when blur target is a chip (checkErrorOnBlur)', async () => {
+		wrapper.unmount()
+		wrapper = mount(SyAutocomplete, {
+			props: {
+				modelValue: ['1'],
+				items,
+				multiple: true,
+				chips: true,
+				label: 'Test blur chip',
+				textKey: 'text',
+				valueKey: 'value',
+				menuId,
+			},
+			attachTo: document.body,
+		})
+
+		// Open menu
+		const input = wrapper.find('input')
+		await input.trigger('click')
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+		expect(isMenuOverlayActive()).toBe(true)
+
+		// Create a chip DOM element as blur relatedTarget
+		const chipEl = document.createElement('span')
+		chipEl.className = 'sy-autocomplete__chip'
+		document.body.appendChild(chipEl)
+
+		const inputEl = getInputEl()!
+		inputEl.dispatchEvent(new FocusEvent('blur', { relatedTarget: chipEl, bubbles: true }))
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		// Menu should remain open
+		expect(isMenuOverlayActive()).toBe(true)
+
+		document.body.removeChild(chipEl)
+	})
+
+	it('keeps menu open when blur target is the clear button (checkErrorOnBlur)', async () => {
+		wrapper.unmount()
+		wrapper = mount(SyAutocomplete, {
+			props: {
+				modelValue: items[0],
+				items,
+				clearable: true,
+				label: 'Test blur clear',
+				textKey: 'text',
+				valueKey: 'value',
+				menuId,
+			},
+			attachTo: document.body,
+		})
+
+		const input = wrapper.find('input')
+		await input.trigger('click')
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+		expect(isMenuOverlayActive()).toBe(true)
+
+		// Create a clear-button DOM element as blur relatedTarget
+		const clearBtn = document.createElement('button')
+		clearBtn.className = 'sy-autocomplete__clear-button'
+		document.body.appendChild(clearBtn)
+
+		const inputEl = getInputEl()!
+		inputEl.dispatchEvent(new FocusEvent('blur', { relatedTarget: clearBtn, bubbles: true }))
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		expect(isMenuOverlayActive()).toBe(true)
+
+		document.body.removeChild(clearBtn)
+	})
+
 	it('shows clear button when clearable and has selection', async () => {
 		wrapper.unmount()
 		wrapper = mount(SyAutocomplete, {

package/src/components/Customs/Selects/SyAutocomplete/utils/ariaManager.ts

@@ -160,21 +160,25 @@ export const ariaManager = {
 					}
 				}
 				inputEl.setAttribute('aria-haspopup', 'listbox')
-				if (!popupRendered) {
+				if (!isOpen.value) {
 					inputEl.removeAttribute('aria-controls')
-					if (isOpen.value) {
-						nextTick(() => {
-							const popupNowRendered = Boolean(document.getElementById(menuId))
-							if (popupNowRendered) {
-								inputEl.setAttribute('aria-controls', menuId)
-							}
-						})
-					}
+				}
+				else if (!popupRendered) {
+					inputEl.removeAttribute('aria-controls')
+					nextTick(() => {
+						const popupNowRendered = Boolean(document.getElementById(menuId))
+						if (isOpen.value && popupNowRendered) {
+							inputEl.setAttribute('aria-controls', menuId)
+						}
+						else {
+							inputEl.removeAttribute('aria-controls')
+						}
+					})
 				}
 				ariaManager.updateValidationAttributes(inputEl, false, false)
 				nextTick(() => {
 					const popupStillThere = Boolean(document.getElementById(menuId))
-					if (popupStillThere) {
+					if (isOpen.value && popupStillThere) {
 						inputEl.setAttribute('aria-controls', menuId)
 					}
 					else {

package/src/components/Customs/Selects/SyInputSelect/SyInputSelect.stories.ts

@@ -508,12 +508,12 @@ const options = [
   { text: 'Option 3', value: '3' },
 ]
 
-const validateForm = () => {
+const validateForm = async (): Promise<void> => {
   // Réinitialiser
   formSubmitted.value = false
   
   // Valider le champ avec la méthode validateOnSubmit
-  const isValid = selectField.value.validateOnSubmit()
+  const isValid = await selectField.value.validateOnSubmit()
   
   if (!isValid) {
     return
@@ -551,7 +551,7 @@ const validateForm = () => {
 				const errorMessages = ref([])
 				const formSubmitted = ref(false)
 
-				const validateForm = () => {
+				const validateForm = async (): Promise<void> => {
 					// Réinitialiser
 					formSubmitted.value = false
 
@@ -562,7 +562,7 @@ const validateForm = () => {
 					}
 
 					// Valider le champ avec la méthode validateOnSubmit
-					const isValid = selectField.value.validateOnSubmit()
+					const isValid = await selectField.value.validateOnSubmit()
 
 					if (!isValid) {
 						return

package/src/components/Customs/Selects/SyInputSelect/SyInputSelect.vue

@@ -50,7 +50,6 @@
 
 	// Initialisation du composable de validation
 	const validation = useValidation({
-		customRules: props.customRules,
 		fieldIdentifier: props.label,
 		disableErrorHandling: props.disableErrorHandling,
 	})
@@ -90,11 +89,11 @@
 	const inputId = ref(`sy-input-select-${Math.random().toString(36).substring(7)}`)
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
-	const selectItem = (item: any) => {
+	const selectItem = async (item: any) => {
 		selectedItem.value = item
 		emit('update:modelValue', item)
 		isOpen.value = false
-		validateField(item)
+		await validateField(item)
 		emit('update:errorMessages', localErrorMessages.value)
 	}
 
@@ -182,7 +181,7 @@
 		: [],
 	)
 
-	const validateField = (value: unknown) => {
+	const validateField = async (value: unknown) => {
 		if (props.readonly) {
 			validation.clearValidation()
 			localErrorMessages.value = []
@@ -195,7 +194,7 @@
 			return true
 		}
 
-		const result = validation.validateField(
+		const result = await validation.validateField(
 			value,
 			[...defaultRules.value, ...(props.customRules || [])],
 		)
@@ -204,14 +203,14 @@
 		return !result.hasError
 	}
 
-	const validateOnSubmit = () => {
-		const isValid = validateField(selectedItem.value)
+	const validateOnSubmit = async () => {
+		const isValid = await validateField(selectedItem.value)
 		hasError.value = !isValid
 		return isValid
 	}
 
-	const checkForErrors = () => {
-		return validateField(selectedItem.value)
+	const checkForErrors = async () => {
+		return await validateField(selectedItem.value)
 	}
 
 	defineExpose({

package/src/components/Customs/Selects/SyInputSelect/tests/SyInputSelect.spec.ts

@@ -96,7 +96,7 @@ describe('SyInputSelect', () => {
 		})
 	})
 
-	describe('Validation', () => {
+	describe('Validation', async () => {
 		it('validateField valide correctement un champ requis avec une valeur', async () => {
 			const wrapper = mount(SyInputSelect, {
 				props: {
@@ -105,7 +105,7 @@ describe('SyInputSelect', () => {
 				},
 			})
 
-			const result = wrapper.vm.validateField({ text: 'Option 1', value: '1' })
+			const result = await wrapper.vm.validateField({ text: 'Option 1', value: '1' })
 			expect(result).toBe(true)
 			expect(wrapper.find('.v-messages__message').exists()).toBe(false)
 		})
@@ -119,7 +119,7 @@ describe('SyInputSelect', () => {
 				},
 			})
 
-			const result = wrapper.vm.validateField(null)
+			const result = await wrapper.vm.validateField(null)
 			expect(result).toBe(false)
 
 			await wrapper.setProps({ errorMessages: ['Test Label est requis'] })
@@ -134,15 +134,15 @@ describe('SyInputSelect', () => {
 				props: { required: true },
 			})
 
-			const result = wrapper.vm.validateOnSubmit()
+			const result = await wrapper.vm.validateOnSubmit()
 			expect(result).toBe(false)
 
 			await wrapper.setProps({ modelValue: { text: 'Option 1', value: '1' } })
-			const resultWithValue = wrapper.vm.validateOnSubmit()
+			const resultWithValue = await wrapper.vm.validateOnSubmit()
 			expect(resultWithValue).toBe(true)
 		})
 
-		it('vérifie que checkForErrors retourne le résultat de la validation', () => {
+		it('vérifie que checkForErrors retourne le résultat de la validation', async () => {
 			const wrapper1 = mount(SyInputSelect, {
 				props: {
 					required: true,
@@ -150,7 +150,7 @@ describe('SyInputSelect', () => {
 				},
 			})
 
-			const result1 = wrapper1.vm.checkForErrors()
+			const result1 = await wrapper1.vm.checkForErrors()
 			expect(result1).toBe(false)
 
 			const wrapper2 = mount(SyInputSelect, {
@@ -160,13 +160,13 @@ describe('SyInputSelect', () => {
 				},
 			})
 
-			const result2 = wrapper2.vm.checkForErrors()
+			const result2 = await wrapper2.vm.checkForErrors()
 			expect(result2).toBe(true)
 		})
 	})
 
 	describe('Mode readonly', () => {
-		it('désactive la validation en mode readonly', () => {
+		it('désactive la validation en mode readonly', async () => {
 			const wrapper = mount(SyInputSelect, {
 				props: {
 					readonly: true,
@@ -174,7 +174,7 @@ describe('SyInputSelect', () => {
 				},
 			})
 
-			const result = wrapper.vm.validateField(null)
+			const result = await wrapper.vm.validateField(null)
 			expect(result).toBe(true)
 			expect(wrapper.find('.v-messages__message').exists()).toBe(false)
 		})

package/src/components/Customs/Selects/SySelect/SySelect.vue

@@ -193,7 +193,7 @@
 
 	const iconColor = computed(() => {
 		if (hasError.value || Boolean(isRequired.value) || props.errorMessages.length > 0) return 'error'
-		return 'rgb(0 0 0 / 70%)'
+		return 'rgb(var(--v-theme-iconBase));'
 	})
 
 	const variant = computed(() => {
@@ -286,7 +286,10 @@
 			emit('update:modelValue', props.multiple ? [] : null)
 
 			// Garder la liste ouverte après une suppression et réinitialiser la navigation au clavier
-			if (event?.type === 'keydown' || event?.type === 'click') {
+			const target = event?.target as HTMLElement | undefined
+			const listElement = list.value?.$el as HTMLElement | undefined
+			const isClickFromList = Boolean(listElement && target && listElement.contains(target))
+			if (event?.type === 'keydown' || isClickFromList) {
 				if (!isOpen.value) {
 					isOpen.value = true
 				}
@@ -968,7 +971,9 @@
 								class="ma-1"
 								closable
 								:close-label="locales.removeChip(getChipText(item))"
-								@click:close="removeChip(item)"
+								@click:close.stop.prevent="removeChip(item)"
+								@keydown.enter.capture.stop.prevent="(event) => (event.target as HTMLElement | null)?.closest('.v-chip__close') && removeChip(item)"
+								@keydown.space.capture.stop.prevent="(event) => (event.target as HTMLElement | null)?.closest('.v-chip__close') && removeChip(item)"
 							>
 								{{ getChipText(item) }}
 							</VChip>
@@ -1144,8 +1149,6 @@
 </template>
 
 <style scoped lang="scss">
-@use '@/assets/tokens';
-
 .sy-select-container {
 	display: flex;
 	flex-direction: column;
@@ -1157,12 +1160,12 @@
 
 	:deep(.v-input__prepend > .v-icon__svg),
 	:deep(.v-input__append > .v-icon__svg) {
-		fill: rgb(0 0 0 / 70%);
+		fill: rgb(var(--v-theme-iconBase));
 	}
 
 	:deep(.v-input__prepend .v-icon:focus-visible),
 	:deep(.v-input__append .v-icon:focus-visible) {
-		outline: 2px solid tokens.$primary-base;
+		outline: 2px solid rgb(var(--v-theme-accentPrimary));
 		outline-offset: 2px;
 		opacity: 1;
 	}
@@ -1213,7 +1216,7 @@
 /* Ensure focus styles match selection styles for keyboard navigation */
 .v-list-item:focus-visible,
 .v-list-item.keyboard-focused {
-	outline: 2px solid tokens.$primary-base;
+	outline: 2px solid rgb(var(--v-theme-accentPrimary));
 	outline-offset: -2px;
 	background-color: rgb(0 0 0 / 8%);
 }
@@ -1240,11 +1243,11 @@
 .v-icon.arrow {
 	position: absolute;
 	right: 10px;
-	color: tokens.$grey-darken-20;
+	color: rgb(var(--v-theme-iconBase));
 }
 
 .sy-select__clear-icon {
-	color: tokens.$grey-darken-20 !important;
+	color: rgb(var(--v-theme-iconBase)) !important;
 	opacity: var(--v-medium-emphasis-opacity) !important;
 }
 
@@ -1289,7 +1292,7 @@
 
 .sy-select :deep(.v-field__input) {
 	opacity: 1;
-	color: tokens.$grey-darken-20 !important;
+	color: rgb(var(--v-theme-iconBase)) !important;
 	cursor: pointer;
 	caret-color: transparent;
 	padding-right: 25px;

package/src/components/Customs/Selects/SySelect/tests/SySelect.spec.ts

@@ -964,6 +964,60 @@ describe('SySelect.vue', () => {
 
 			wrapper.unmount()
 		})
+
+		it('removes chip when Enter key is pressed on chip close button', async () => {
+			const items = [
+				{ text: 'Option 1', value: '1' },
+				{ text: 'Option 2', value: '2' },
+			]
+			const wrapper = mount(SySelect, {
+				props: {
+					items,
+					multiple: true,
+					chips: true,
+					modelValue: ['1', '2'],
+					textKey: 'text',
+					valueKey: 'value',
+				},
+				attachTo: document.body,
+			})
+
+			await wrapper.vm.$nextTick()
+			const closeButton = wrapper.find('.v-chip__close')
+			closeButton.element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }))
+			await wrapper.vm.$nextTick()
+
+			expect(wrapper.emitted()['update:modelValue']?.[0]).toEqual([['2']])
+
+			wrapper.unmount()
+		})
+
+		it('removes chip when Space key is pressed on chip close button', async () => {
+			const items = [
+				{ text: 'Option 1', value: '1' },
+				{ text: 'Option 2', value: '2' },
+			]
+			const wrapper = mount(SySelect, {
+				props: {
+					items,
+					multiple: true,
+					chips: true,
+					modelValue: ['1', '2'],
+					textKey: 'text',
+					valueKey: 'value',
+				},
+				attachTo: document.body,
+			})
+
+			await wrapper.vm.$nextTick()
+			const closeButton = wrapper.find('.v-chip__close')
+			closeButton.element.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true, cancelable: true }))
+			await wrapper.vm.$nextTick()
+
+			expect(wrapper.emitted()['update:modelValue']?.[0]).toEqual([['2']])
+
+			wrapper.unmount()
+		})
 	})
 
 	describe('keyboard navigation', () => {

package/src/components/Customs/SyCheckBoxGroup/SyCheckBoxGroup.vue

@@ -83,9 +83,6 @@
 	const isSubmitted = ref(false)
 
 	const validation = useValidation({
-		customRules: props.customRules,
-		warningRules: props.customWarningRules,
-		successRules: props.customSuccessRules,
 		showSuccessMessages: props.showSuccessMessages,
 		fieldIdentifier: props.label,
 		disableErrorHandling: props.disableErrorHandling,
@@ -135,7 +132,7 @@
 		return model.value as (string | number) | null
 	}
 
-	const validateField = (value: (string | number) | (string | number)[] | null) => {
+	const validateField = async (value: (string | number) | (string | number)[] | null) => {
 		if (props.readonly) {
 			validation.clearValidation()
 			return true
@@ -146,7 +143,7 @@
 			return true
 		}
 
-		const result = validation.validateField(
+		const result = await validation.validateField(
 			value,
 			[...defaultRules.value, ...props.customRules],
 			props.customWarningRules,
@@ -155,18 +152,18 @@
 		return !result.hasError
 	}
 
-	const validateOnSubmit = () => {
+	const validateOnSubmit = async () => {
 		isSubmitted.value = true
-		return validateField(getValidationValue())
+		return await validateField(getValidationValue())
 	}
 
 	const checkErrorOnBlur = () => {
 		validateField(getValidationValue())
 	}
 
-	watch(model, (newValue) => {
+	watch(model, async (newValue) => {
 		if (!props.isValidateOnBlur || isSubmitted.value) {
-			validateField(newValue as (string | number) | (string | number)[] | null)
+			await validateField(newValue as (string | number) | (string | number)[] | null)
 		}
 	})
 

package/src/components/Customs/SyCheckbox/SyCheckbox.stories.ts

@@ -5,7 +5,7 @@ import { fn } from '@storybook/test'
 
 // Interface pour typer correctement le composant SyCheckbox avec sa méthode validateOnSubmit
 interface SyCheckboxInstance {
-	validateOnSubmit: () => boolean
+	validateOnSubmit: () => Promise<boolean>
 }
 
 const meta = {
@@ -171,9 +171,6 @@ export const Indeterminate: Story = {
 		template: `<SyCheckbox v-model="checked" :indeterminate="indeterminate" v-bind="args" label="Case à cocher indéterminée" />`,
 	}),
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -207,9 +204,6 @@ Cette case à cocher est dans un état indéterminé, généralement utilisé lo
 
 export const WithControlsIds: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -702,11 +696,11 @@ const rules = [
   },
 ]
 
-const validateForm = () => {
+const validateForm = async (): Promise<void> => {
   if (!checkbox.value || !checkbox2.value) return
   hasError.value = true
-  const isValid = checkbox.value.validateOnSubmit()
-  const isValid2 = checkbox2.value.validateOnSubmit()
+  const isValid = await checkbox.value.validateOnSubmit()
+  const isValid2 = await checkbox2.value.validateOnSubmit()
   if (isValid && isValid2) {
     formSubmitted.value = true
     hasError.value = false
@@ -735,18 +729,18 @@ Cette case à cocher utilise des règles de validation personnalisées et valide
 			const hasError = ref(false)
 
 			// Revalider quand les valeurs changent
-			watch([checked, checked2], () => {
+			watch([checked, checked2], async () => {
 				if (hasError.value && checkbox.value && checkbox2.value) {
-					checkbox.value.validateOnSubmit()
-					checkbox2.value.validateOnSubmit()
+					await checkbox.value.validateOnSubmit()
+					await checkbox2.value.validateOnSubmit()
 				}
 			})
 
-			const validateForm = () => {
+			const validateForm = async (): Promise<void> => {
 				if (!checkbox.value || !checkbox2.value) return
 				hasError.value = true
-				const isValid = checkbox.value.validateOnSubmit()
-				const isValid2 = checkbox2.value.validateOnSubmit()
+				const isValid = await checkbox.value.validateOnSubmit()
+				const isValid2 = await checkbox2.value.validateOnSubmit()
 				if (isValid && isValid2) {
 					formSubmitted.value = true
 					hasError.value = false