@cnamts/synapse 1.0.25 → 1.0.27

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

@@ -123,6 +123,8 @@ export const ariaManager = {
 		activeDescendant: Ref<string>,
 		loading: boolean,
 		inputLabel?: string,
+		required?: boolean,
+		hasError?: boolean,
 	): void {
 		nextTick(() => {
 			const tf = textFieldRef.value
@@ -175,7 +177,7 @@ export const ariaManager = {
 						}
 					})
 				}
-				ariaManager.updateValidationAttributes(inputEl, false, false)
+				ariaManager.updateValidationAttributes(inputEl, required ?? false, hasError ?? false)
 				nextTick(() => {
 					const popupStillThere = Boolean(document.getElementById(menuId))
 					if (isOpen.value && popupStillThere) {

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

@@ -1,4 +1,4 @@
-import { nextTick, type Ref, type ComputedRef } from 'vue'
+import { computed, nextTick, onUnmounted, type ComputedRef, type Ref } from 'vue'
 import { useSySelectKeyboard } from '@/components/Customs/Selects/SySelect/composables/useSySelectKeyboard'
 import type { ItemType, SelectValue, SelectArray } from '../types'
 
@@ -16,14 +16,19 @@ interface KeyboardHandlerDeps {
 	filteredItems: ComputedRef<ItemType[]>
 	uniqueMenuId: Ref<string>
 	focusListItem: boolean
+	hasPrependItem?: ComputedRef<boolean>
 }
 
 export function useSyAutocompleteKeyboard(
 	props: KeyboardHandlerProps,
 	deps: KeyboardHandlerDeps,
 ) {
+	const skipInitialFocus = computed(() => !!deps.hasPrependItem?.value)
+
 	const {
 		activeDescendantId: keyboardActiveId,
+		lastFocusedIndex,
+		setActiveDescendant,
 		handleEnterKey,
 		handleDownKey,
 		handleUpKey,
@@ -41,18 +46,81 @@ export function useSyAutocompleteKeyboard(
 		getItemText: deps.getItemText,
 		optionIdPrefix: `${deps.uniqueMenuId.value}-option`,
 		focusListItem: deps.focusListItem,
+		skipInitialFocus,
 	})
 
+	// Apply keyboard-focused class to the prepend item in the DOM.
+	// The prepend item is always the first .v-list-item in the listbox (rendered before the options).
+	// VListItem inherits role="option" from the listbox context, so we cannot use :not([role="option"]).
+	// Retries via requestAnimationFrame because VMenu uses rAF internally (requestNewFrame) for overlay rendering —
+	// nextTick/setTimeout fire before Vuetify's rAF, so the listbox may not be in the DOM yet.
+	const applyPrependFocusDom = (retries = 3) => {
+		const container = document.getElementById(deps.uniqueMenuId.value)
+		const prependEl = container?.querySelector<HTMLElement>('.v-list-item') ?? null
+		if (!prependEl) {
+			if (retries > 0) requestAnimationFrame(() => applyPrependFocusDom(retries - 1))
+			return
+		}
+		document.querySelectorAll<HTMLElement>(`#${deps.uniqueMenuId.value} .v-list-item`).forEach((item) => {
+			item.classList.remove('keyboard-focused')
+			item.setAttribute('tabindex', '-1')
+		})
+		prependEl.classList.add('keyboard-focused')
+		prependEl.setAttribute('tabindex', '0')
+		prependEl.scrollIntoView({ block: 'nearest' })
+	}
+
+	// Focus the prepend slot item (always the first .v-list-item in the listbox)
+	const focusPrepend = () => {
+		lastFocusedIndex.value = -1
+		keyboardActiveId.value = ''
+		applyPrependFocusDom()
+	}
+
+	const wrappedHandleDownKey = () => {
+		if (!deps.isOpen.value && deps.hasPrependItem?.value) {
+			// Ouvrir sans passer par handleDownKey (qui forcerait focus option 0)
+			// watch(isOpen) ci-dessus prendra en charge le focus du prepend
+			deps.isOpen.value = true
+		}
+		else if (deps.isOpen.value && deps.hasPrependItem?.value && lastFocusedIndex.value < 0) {
+			setActiveDescendant(0)
+		}
+		else {
+			handleDownKey()
+		}
+	}
+
+	const wrappedHandleUpKey = () => {
+		if (deps.isOpen.value && deps.hasPrependItem?.value && lastFocusedIndex.value === 0) {
+			focusPrepend()
+		}
+		else {
+			handleUpKey()
+		}
+	}
+
+	const wrappedHandleEnterKey = () => {
+		if (deps.isOpen.value && deps.hasPrependItem?.value && lastFocusedIndex.value < 0) {
+			const container = document.getElementById(deps.uniqueMenuId.value)
+			container?.querySelector<HTMLElement>('.v-list-item')?.click()
+		}
+		else {
+			handleEnterKey()
+		}
+	}
+
 	const keydownAdded = new WeakMap<HTMLInputElement, boolean>()
+	const registeredInputs: HTMLInputElement[] = []
 
 	const handleKeydown = (e: KeyboardEvent) => {
 		const key = e.key
 		if (['ArrowUp', 'ArrowDown', 'Enter', 'Escape', 'Home', 'End', 'PageUp', 'PageDown'].includes(key)) {
 			e.preventDefault()
 			const handlers: Record<string, () => void> = {
-				ArrowUp: handleUpKey,
-				ArrowDown: handleDownKey,
-				Enter: handleEnterKey,
+				ArrowUp: wrappedHandleUpKey,
+				ArrowDown: wrappedHandleDownKey,
+				Enter: wrappedHandleEnterKey,
 				Escape: handleEscapeKey,
 				Home: handleHomeKey,
 				End: handleEndKey,
@@ -81,7 +149,6 @@ export function useSyAutocompleteKeyboard(
 				if (!noFocus) {
 					inputEl.focus()
 					if (props.multiple && !props.chips) {
-						// Position cursor at the end for multiple selection
 						const len = inputEl.value?.length ?? 0
 						inputEl.setSelectionRange(len, len)
 					}
@@ -93,14 +160,21 @@ export function useSyAutocompleteKeyboard(
 				if (!keydownAdded.get(inputEl)) {
 					inputEl.addEventListener('keydown', handleKeydown)
 					keydownAdded.set(inputEl, true)
+					registeredInputs.push(inputEl)
 				}
 			}
 		})
 	}
 
+	onUnmounted(() => {
+		registeredInputs.forEach(el => el.removeEventListener('keydown', handleKeydown))
+		registeredInputs.length = 0
+	})
+
 	return {
 		handleKeydown,
 		focusInput,
+		focusPrepend,
 		keyboardActiveId,
 		handleTabKey,
 	}