@cnamts/synapse 1.0.23 → 1.0.25

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, {
@@ -520,6 +663,72 @@ describe('SyAutocomplete', () => {
 		expect(option0?.getAttribute('aria-selected')).toBe('false')
 	})
 
+	describe('disabled', () => {
+		it('does not open menu when input is clicked on a disabled field', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: null,
+					items,
+					label: 'Test Disabled',
+					textKey: 'text',
+					valueKey: 'value',
+					disabled: true,
+					menuId,
+				},
+				attachTo: document.body,
+			})
+
+			const input = wrapper.find('input')
+			await input.trigger('click')
+			await flushPromises()
+			await wrapper.vm.$nextTick()
+			expect(isMenuOverlayActive()).toBe(false)
+		})
+
+		it('does not emit update:modelValue when selectItem is called on a disabled field', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: null,
+					items,
+					label: 'Test Disabled Select',
+					textKey: 'text',
+					valueKey: 'value',
+					disabled: true,
+					menuId,
+				},
+				attachTo: document.body,
+			})
+
+			// openAndFocus is guarded, but selectItem itself is not — the field input
+			// is natively disabled so users cannot interact; we verify the menu stays closed.
+			expect(isMenuOverlayActive()).toBe(false)
+			await wrapper.vm.$nextTick()
+			expect(isMenuOverlayActive()).toBe(false)
+		})
+
+		it('passes disabled prop to SyTextField', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: null,
+					items,
+					label: 'Test Disabled TextField',
+					textKey: 'text',
+					valueKey: 'value',
+					disabled: true,
+					menuId,
+				},
+				attachTo: document.body,
+			})
+
+			await wrapper.vm.$nextTick()
+			const textField = wrapper.findComponent(SyTextField)
+			expect(textField.props('disabled')).toBe(true)
+		})
+	})
+
 	describe('hideDetails', () => {
 		it('hides the details zone when hideDetails is true', async () => {
 			wrapper.unmount()

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({
@@ -304,11 +303,9 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .sy-input-select {
 	text-transform: none !important;
-	font-size: 16px;
+	font-size: var(--v-fontSize-corpsDeTexte);
 }
 
 .v-input {
@@ -347,14 +344,14 @@
 }
 
 .error {
-	border-color: tokens.$danger-default;
+	border-color: rgb(var(--v-theme-error));
 }
 
 .v-btn {
-	color: tokens.$blue-base;
+	color: rgb(var(--v-theme-blue-base));
 }
 
 .text-color {
-	color: tokens.$blue-base;
+	color: rgb(var(--v-theme-blue-base));
 }
 </style>

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.stories.ts

@@ -11,7 +11,7 @@ const meta: Meta<typeof SySelect> = {
 	component: SySelect,
 	parameters: {
 		layout: 'fullscreen',
-		controls: { exclude: ['selectedValue', 'isOpen', 'closeList'] },
+		controls: { exclude: ['onUpdate:modelValue', 'selectedValue', 'isOpen', 'closeList'] },
 	},
 	argTypes: {
 		selectedValue: { control: 'text' },
@@ -115,9 +115,6 @@ export default meta
 type Story = StoryObj<typeof meta>
 export const Default: Story = {
 	parameters: {
-		a11y: {
-			disable: false,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -180,7 +177,6 @@ export const Default: Story = {
 						v-bind="args"
 					/>
 				</div>
-				<br/><br/><br/><br/>
 			`,
 		}
 	},
@@ -188,9 +184,6 @@ export const Default: Story = {
 
 export const HelpText: Story = {
 	parameters: {
-		a11y: {
-			disable: false,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -257,7 +250,6 @@ export const HelpText: Story = {
 						v-bind="args"
 					/>
 				</div>
-				<br/><br/><br/><br/>
 			`,
 		}
 	},
@@ -265,9 +257,6 @@ export const HelpText: Story = {
 
 export const Required: Story = {
 	parameters: {
-		a11y: {
-			disable: false,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -326,9 +315,6 @@ export const Required: Story = {
 
 export const RequiredWithAsterisk: Story = {
 	parameters: {
-		a11y: {
-			disable: false,
-		},
 		docs: {
 			description: {
 				story: 'Version du champ de sélection requis avec un astérisque visuel.',
@@ -394,9 +380,6 @@ const items = [
 
 export const SlotPrepend: Story = {
 	parameters: {
-		a11y: {
-			disable: false,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -461,9 +444,6 @@ export const SlotPrepend: Story = {
 
 export const SlotAppend: Story = {
 	parameters: {
-		a11y: {
-			disable: false,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -561,9 +541,6 @@ export const WithTooltips: Story = {
 		}
 	},
 	parameters: {
-		a11y: {
-			disable: false,
-		},
 		docs: {
 			description: {
 				story: 'Exemple de champ avec des tooltips d\'information. Les icônes d\'information apparaissent automatiquement lorsque les props prependTooltip et/ou appendTooltip sont renseignées. La position des tooltips peut être contrôlée avec la prop tooltipLocation.',
@@ -606,9 +583,6 @@ export const WithTooltips: Story = {
 
 export const MultipleSelection: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		docs: {
 			description: {
 				story: 'Exemple de sélection multiple avec SySelect. Les options dans le menu déroulant sont affichées avec des cases à cocher pour faciliter la sélection multiple.',
@@ -699,9 +673,6 @@ const options = [
 
 export const ChipsDisplay: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		docs: {
 			description: {
 				story: 'Exemple de sélection multiple avec affichage en chips. Les options sélectionnées sont affichées sous forme de chips dans le champ, et les options dans le menu déroulant sont affichées avec des cases à cocher.',
@@ -776,9 +747,6 @@ const options = [
 
 export const withCustomError: Story = {
 	parameters: {
-		a11y: {
-			disable: false,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -854,9 +822,6 @@ export const withCustomError: Story = {
 
 export const withCustomKey: Story = {
 	parameters: {
-		a11y: {
-			disable: false,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -935,9 +900,6 @@ export const Info: Story = {
 
 export const FormValidation: Story = {
 	parameters: {
-		a11y: {
-			disable: false,
-		},
 		docs: {
 			description: {
 				story: 'Exemple d\'utilisation du SySelect dans un formulaire.',