feat: Add z-index prop to FwbAutocomplete component for customizable dropdown overlay

Author: moghaddam01

docs/components/autocomplete.md

@@ -325,6 +325,7 @@ const countries = [
 | `label` | `string` | `undefined` | Label text for the input field |
 | `inputComponent` | `Component` | `FwbInput` | Vue component to use as the input field |
 | `inputProps` | `Record<string, any>` | `{}` | Additional props to pass to the input component |
+| `zIndex` | `number` | `100` | Z-index value for the dropdown overlay |
 
 ### Input Component Props
 

src/components/FwbAutocomplete/FwbAutocomplete.vue

@@ -185,6 +185,7 @@ const props = withDefaults(
     dropdownClass: '',
     inputComponent: FwbInput,
     inputProps: () => ({}),
+    zIndex: 100,
   },
 )
 

src/components/FwbAutocomplete/composables/useAutocompleteClasses.ts

@@ -1,8 +1,8 @@
-import { useMergeClasses } from '@/composables/useMergeClasses'
 import { computed, type Ref } from 'vue'
 
+import { useMergeClasses } from '@/composables/useMergeClasses'
+
 const baseWrapperClasses = 'relative w-full'
-const baseDropdownClasses = 'absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto'
 const baseDropdownItemClasses = 'px-4 py-3 cursor-pointer transition-colors duration-150 border-b border-gray-200 dark:border-gray-600 last:border-b-0'
 const highlightedDropdownItemClasses = 'bg-blue-50 dark:bg-blue-900/20'
 const hoverDropdownItemClasses = 'hover:bg-gray-50 dark:hover:bg-gray-700'
@@ -13,6 +13,7 @@ export interface UseAutocompleteClassesProps {
   wrapperClass?: Ref<string | Record<string, boolean> | undefined>
   labelClass?: Ref<string | Record<string, boolean> | undefined>
   dropdownClass?: Ref<string | Record<string, boolean> | undefined>
+  zIndex?: Ref<number | undefined>
 }
 
 export function useAutocompleteClasses (props: UseAutocompleteClassesProps) {
@@ -23,9 +24,13 @@ export function useAutocompleteClasses (props: UseAutocompleteClassesProps) {
     ])
   })
 
+  const baseDropdownClasses = computed(() =>
+    `absolute z-[${props.zIndex?.value}] w-full mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto`,
+  )
+
   const dropdownClasses = computed(() => {
     return useMergeClasses([
-      baseDropdownClasses,
+      baseDropdownClasses.value,
       typeof props.dropdownClass?.value === 'string' ? props.dropdownClass.value : '',
     ])
   })

src/components/FwbAutocomplete/tests/Autocomplete.spec.ts

@@ -484,4 +484,41 @@ describe('FwbAutocomplete', () => {
     const fwbInput = wrapper.findComponent({ name: 'FwbInput' })
     expect(fwbInput.exists()).toBe(true)
   })
+
+  it('applies custom z-index to dropdown', async () => {
+    const wrapper = mount(FwbAutocomplete, {
+      props: {
+        options: mockOptions,
+        searchFields: ['name'],
+        display: 'name',
+        zIndex: 200,
+      },
+    })
+
+    const input = wrapper.find('input')
+    await input.trigger('focus')
+    await nextTick()
+
+    const dropdown = wrapper.find('[data-testid="fwb-autocomplete-dropdown"]')
+    expect(dropdown.exists()).toBe(true)
+    expect(dropdown.classes()).toContain('z-[200]')
+  })
+
+  it('uses default z-index when not specified', async () => {
+    const wrapper = mount(FwbAutocomplete, {
+      props: {
+        options: mockOptions,
+        searchFields: ['name'],
+        display: 'name',
+      },
+    })
+
+    const input = wrapper.find('input')
+    await input.trigger('focus')
+    await nextTick()
+
+    const dropdown = wrapper.find('[data-testid="fwb-autocomplete-dropdown"]')
+    expect(dropdown.exists()).toBe(true)
+    expect(dropdown.classes()).toContain('z-[100]')
+  })
 })

src/components/FwbAutocomplete/types.ts

@@ -27,6 +27,7 @@ export interface AutocompleteProps<T = Record<string, any>> {
   dropdownClass?: string | Record<string, boolean>
   inputComponent?: Component
   inputProps?: Record<string, any>
+  zIndex?: number
 }
 
 export interface AutocompleteEmits<T = Record<string, any>> {