@cnamts/synapse 1.0.22 → 1.0.24

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

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest'
 import { mount, flushPromises } from '@vue/test-utils'
-import { VMenu, VChip } from 'vuetify/components'
+import { VMenu } from 'vuetify/components'
 
 import SyAutocomplete from '../SyAutocomplete.vue'
 import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
@@ -128,13 +128,13 @@ describe('SyAutocomplete', () => {
 
 		// Some environments can emit a follow-up input event with the previous DOM value.
 		// Ensure it doesn't re-populate the query after selection.
-		textField.vm.$emit('update:modelValue', 'Option 1, Opt')
+		textField.vm.$emit('update:modelValue', 'Opt')
 		await flushPromises()
 		await wrapper.vm.$nextTick()
 
-		// Query should be cleared, leaving only selected label prefix in input
+		// Search and input should be cleared; selected items render as inline labels, not in input value
 		expect(wrapper.vm.search).toBe('')
-		expect(getInputEl()!.value).toBe('Option 1, ')
+		expect(getInputEl()!.value).toBe('')
 	})
 
 	it('displays chips in multiple mode', async () => {
@@ -150,12 +150,13 @@ describe('SyAutocomplete', () => {
 				textKey: 'text',
 				valueKey: 'value',
 			},
+			attachTo: document.body,
 		})
 
 		await wrapper.vm.$nextTick()
-		const chips = wrapper.findAllComponents(VChip)
+		const chips = wrapper.findAll('.v-chip')
 		expect(chips.length).toBe(1)
-		expect(chips[0]!.text()).toBe('Option 1')
+		expect(chips[0]!.text()).toContain('Option 1')
 	})
 
 	it('removes chip when close button is clicked', async () => {
@@ -171,14 +172,158 @@ describe('SyAutocomplete', () => {
 				textKey: 'text',
 				valueKey: 'value',
 			},
+			attachTo: document.body,
+		})
+
+		await wrapper.vm.$nextTick()
+		const closeBtn = wrapper.find('.v-chip__close')
+		await closeBtn.trigger('click')
+		await wrapper.vm.$nextTick()
+
+		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 chip = wrapper.findComponent(VChip)
-		await chip.vm.$emit('click:close')
+		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')?.[0]).toEqual([[]])
+		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 () => {
@@ -298,6 +443,181 @@ describe('SyAutocomplete', () => {
 		expect(isMenuOverlayActive()).toBe(false)
 	})
 
+	describe('selectionText', () => {
+		const selectionText = (selected: unknown[]) => `${selected.length} élément${selected.length > 1 ? 's' : ''} sélectionné${selected.length > 1 ? 's' : ''}`
+
+		it('displays custom text in prepend-inner when items are selected', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: ['1', '2'],
+					items,
+					multiple: true,
+					selectionText,
+					label: 'Test selectionText',
+					textKey: 'text',
+					valueKey: 'value',
+					menuId,
+				},
+				attachTo: document.body,
+			})
+			await wrapper.vm.$nextTick()
+
+			const selectionTextEl = wrapper.find('.sy-autocomplete__selection-text')
+			expect(selectionTextEl.exists()).toBe(true)
+			expect(selectionTextEl.text()).toBe('2 éléments sélectionnés')
+			expect(getInputEl()?.value).toBe('')
+		})
+
+		it('does not display selection text element when no items are selected', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: [],
+					items,
+					multiple: true,
+					selectionText,
+					label: 'Test selectionText vide',
+					textKey: 'text',
+					valueKey: 'value',
+					menuId,
+				},
+				attachTo: document.body,
+			})
+			await wrapper.vm.$nextTick()
+
+			expect(wrapper.find('.sy-autocomplete__selection-text').exists()).toBe(false)
+		})
+
+		it('keeps custom text visible when menu is open', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: ['1', '2'],
+					items,
+					multiple: true,
+					selectionText,
+					label: 'Test selectionText ouvert',
+					textKey: 'text',
+					valueKey: 'value',
+					menuId,
+				},
+				attachTo: document.body,
+			})
+			await wrapper.vm.$nextTick()
+
+			const input = wrapper.find('input')
+			await input.trigger('click')
+			await flushPromises()
+			await wrapper.vm.$nextTick()
+
+			// Custom text still visible in prepend-inner, input empty for searching
+			expect(wrapper.find('.sy-autocomplete__selection-text').text()).toBe('2 éléments sélectionnés')
+			expect(getInputEl()?.value).toBe('')
+		})
+
+		it('updates custom text when selection changes', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: ['1'],
+					items,
+					multiple: true,
+					selectionText,
+					label: 'Test selectionText update',
+					textKey: 'text',
+					valueKey: 'value',
+					menuId,
+				},
+				attachTo: document.body,
+			})
+			await wrapper.vm.$nextTick()
+			expect(wrapper.find('.sy-autocomplete__selection-text').text()).toBe('1 élément sélectionné')
+
+			await wrapper.setProps({ modelValue: ['1', '2', '3'] })
+			await wrapper.vm.$nextTick()
+			expect(wrapper.find('.sy-autocomplete__selection-text').text()).toBe('3 éléments sélectionnés')
+		})
+	})
+
+	describe('loading', () => {
+		it('shows progress bar when loading is true', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: null,
+					items,
+					label: 'Test Loading',
+					textKey: 'text',
+					valueKey: 'value',
+					loading: true,
+					menuId,
+				},
+				attachTo: document.body,
+			})
+
+			await wrapper.vm.$nextTick()
+			const progressBar = wrapper.find('.v-progress-linear')
+			expect(progressBar.exists()).toBe(true)
+		})
+
+		it('does not show progress bar when loading is false', async () => {
+			await wrapper.vm.$nextTick()
+			const progressBar = wrapper.find('.v-progress-linear')
+			expect(progressBar.exists()).toBe(false)
+		})
+
+		it('hides no-data message while loading', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: null,
+					items: [],
+					label: 'Test Loading No Data',
+					textKey: 'text',
+					valueKey: 'value',
+					loading: true,
+					menuId,
+				},
+				attachTo: document.body,
+			})
+
+			const input = wrapper.find('input')
+			await input.trigger('click')
+			await flushPromises()
+			await wrapper.vm.$nextTick()
+
+			// No-data item should not appear while loading
+			const noDataItem = document.body.querySelector(`#${menuId} .v-list-item`)
+			expect(noDataItem).toBeNull()
+		})
+
+		it('shows no-data message once loading is done and items is empty', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: null,
+					items: [],
+					label: 'Test Loading Done',
+					textKey: 'text',
+					valueKey: 'value',
+					loading: false,
+					menuId,
+				},
+				attachTo: document.body,
+			})
+
+			const input = wrapper.find('input')
+			await input.trigger('click')
+			await flushPromises()
+			await wrapper.vm.$nextTick()
+
+			const listItems = document.body.querySelectorAll(`#${menuId} .v-list-item`)
+			const texts = Array.from(listItems).map(el => el.textContent?.trim())
+			expect(texts).toContain('Aucune option')
+		})
+	})
+
 	it('selects and deselects items in multiple mode (mouse + keyboard)', async () => {
 		wrapper.unmount()
 		wrapper = mount(SyAutocomplete, {
@@ -342,4 +662,52 @@ describe('SyAutocomplete', () => {
 		option0 = getOption(0)
 		expect(option0?.getAttribute('aria-selected')).toBe('false')
 	})
+
+	describe('hideDetails', () => {
+		it('hides the details zone when hideDetails is true', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: null,
+					items,
+					label: 'Test hideDetails',
+					textKey: 'text',
+					valueKey: 'value',
+					hideDetails: true,
+					menuId,
+				},
+				attachTo: document.body,
+			})
+
+			await wrapper.vm.$nextTick()
+			expect(wrapper.find('.v-input__details').exists()).toBe(false)
+		})
+
+		it('shows the details zone when hideDetails is false', async () => {
+			await wrapper.vm.$nextTick()
+			expect(wrapper.find('.v-input__details').exists()).toBe(true)
+		})
+
+		it('does not show error messages when hideDetails is true even with validation errors', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: null,
+					items,
+					label: 'Test hideDetails + erreur',
+					textKey: 'text',
+					valueKey: 'value',
+					hideDetails: true,
+					hasError: true,
+					errorMessages: ['Erreur de validation'],
+					menuId,
+				},
+				attachTo: document.body,
+			})
+
+			await wrapper.vm.$nextTick()
+			expect(wrapper.find('.v-input__details').exists()).toBe(false)
+			expect(wrapper.find('.v-messages').exists()).toBe(false)
+		})
+	})
 })

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

@@ -145,26 +145,40 @@ export const ariaManager = {
 						popupRendered,
 					},
 				)
-				const labelToApply = inputLabel || inputEl.getAttribute('aria-label') || inputEl.getAttribute('placeholder') || ''
-				if (labelToApply) {
-					inputEl.setAttribute('aria-label', labelToApply)
+				const labelledById = inputEl.getAttribute('aria-labelledby')
+				const labelElement = labelledById ? document.getElementById(labelledById) : null
+				const labelElementHasText = Boolean(labelElement?.textContent?.trim())
+				if (labelElementHasText) {
+					// aria-labelledby references a visible label — aria-label is redundant and causes validator errors
+					inputEl.removeAttribute('aria-label')
+				}
+				else {
+					// No visible label element (e.g. chips mode with label="") — use aria-label as fallback
+					const labelToApply = inputLabel || inputEl.getAttribute('aria-label') || inputEl.getAttribute('placeholder') || ''
+					if (labelToApply) {
+						inputEl.setAttribute('aria-label', labelToApply)
+					}
 				}
 				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/SyAutocomplete/utils/useSelectionLogic.ts

@@ -19,15 +19,9 @@ export function useSelectionLogic(
 	emit: EmitFunction,
 ) {
 	const resetValue = () => {
-		if (props.multiple) {
-			selected.value = []
-			emit('update:modelValue', [])
-		}
-		else {
-			selected.value = null
-			search.value = ''
-			emit('update:modelValue', null)
-		}
+		selected.value = null
+		search.value = ''
+		emit('update:modelValue', null)
 	}
 
 	const updateMultipleSelection = (valueKeyValue: string | number, valueToStore: ItemType | string | number) => {
@@ -44,7 +38,12 @@ export function useSelectionLogic(
 			arr.push(valueToStore)
 		}
 		selected.value = arr as SelectArray
-		emit('update:modelValue', arr as SelectArray)
+		if (arr.length === 0) {
+			emit('update:modelValue', null)
+		}
+		else {
+			emit('update:modelValue', arr as SelectArray)
+		}
 	}
 
 	const updateSingleSelection = (valueToStore: SelectValue, item: ItemType) => {

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)
 		})