diff --git a/aform/package.json b/aform/package.json
index 2c1c1a7c..5a2ec51e 100644
--- a/aform/package.json
+++ b/aform/package.json
@@ -45,6 +45,7 @@
 		"@stonecrop/themes": "workspace:*",
 		"@stonecrop/utilities": "workspace:*",
 		"@vueuse/core": "^12.0.0",
+		"@vueuse/components": "^12.0.0",
 		"vue": "^3.5.11"
 	},
 	"devDependencies": {
diff --git a/aform/src/components/form/ADropdown.vue b/aform/src/components/form/ADropdown.vue
index 4e842a8d..69187e03 100644
--- a/aform/src/components/form/ADropdown.vue
+++ b/aform/src/components/form/ADropdown.vue
@@ -1,25 +1,26 @@
 <template>
-	<div class="autocomplete" :class="{ isOpen: isOpen }">
+	<div class="autocomplete" :class="{ isOpen: dropdown.open }" v-on-click-outside="onClickOutside">
 		<div class="input-wrapper">
 			<input
-				ref="mopInput"
-				type="text"
-				@input="onChange"
-				@focus="onChange"
 				v-model="search"
-				@keydown.down="onArrowDown"
-				@keydown.up="onArrowUp"
-				@keydown.enter="onEnter" />
-
-			<ul id="autocomplete-results" v-show="isOpen" class="autocomplete-results">
-				<li class="loading autocomplete-result" v-if="isLoading">Loading results...</li>
+				type="text"
+				@input="filter"
+				@focus="openDropdown"
+				@keydown.down="selectNextResult"
+				@keydown.up="selectPrevResult"
+				@keydown.enter="setCurrentResult"
+				@keydown.esc="onClickOutside"
+				@keydown.tab="onClickOutside" />
+
+			<ul id="autocomplete-results" v-show="dropdown.open" class="autocomplete-results">
+				<li class="loading autocomplete-result" v-if="dropdown.loading">Loading results...</li>
 				<li
 					v-else
-					v-for="(result, i) in results"
-					:key="i"
-					@click="setResult(result)"
+					v-for="(result, i) in dropdown.results"
+					:key="result"
+					@click.stop="setResult(result)"
 					class="autocomplete-result"
-					:class="{ 'is-active': i === arrowCounter }">
+					:class="{ 'is-active': i === dropdown.activeItemIndex }">
 					{{ result }}
 				</li>
 			</ul>
@@ -29,94 +30,99 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref /* useTemplateRef */ } from 'vue'
+import { vOnClickOutside } from '@vueuse/components'
+import { reactive } from 'vue'
 
-const { label, items, isAsync } = defineProps<{
+const { label, items, isAsync, filterFunction } = defineProps<{
 	label: string
 	items?: string[]
 	isAsync?: boolean
+	filterFunction?: (search: string) => string[] | Promise<string[]>
 }>()
-
-const emit = defineEmits(['filterChanged'])
-
-const results = ref(items)
 const search = defineModel<string>()
-const isLoading = ref(false)
-const arrowCounter = ref(0)
-const isOpen = ref(false)
-// const mopInput = useTemplateRef<HTMLInputElement>('mopInput')
-
-onMounted(() => {
-	document.addEventListener('click', handleClickOutside)
-	filterResults()
-})
 
-onUnmounted(() => {
-	document.removeEventListener('click', handleClickOutside)
+const dropdown = reactive({
+	activeItemIndex: null as number | null,
+	open: false,
+	loading: false,
+	results: items,
 })
 
-const setResult = result => {
-	search.value = result
-	closeResults()
-}
-
-const filterResults = () => {
-	if (!search.value) {
-		results.value = items
-	} else {
-		results.value = items.filter(item => {
-			return item.toLowerCase().indexOf(search.value.toLowerCase()) > -1
-		})
-	}
-}
-
-const onChange = () => {
-	isOpen.value = true
-	if (isAsync) {
-		isLoading.value = true
-		emit('filterChanged', search.value)
+const onClickOutside = () => closeDropdown()
+
+const filter = async () => {
+	dropdown.open = true
+	if (filterFunction) {
+		if (isAsync) dropdown.loading = true
+		try {
+			const filteredResults = await filterFunction(search.value || '')
+			dropdown.results = filteredResults
+		} catch {
+			dropdown.results = []
+		} finally {
+			if (isAsync) dropdown.loading = false
+		}
 	} else {
 		filterResults()
 	}
 }
 
-const handleClickOutside = () => {
-	closeResults()
-	arrowCounter.value = 0
+const setResult = (result: string) => {
+	search.value = result
+	closeDropdown(result)
 }
 
-const closeResults = () => {
-	isOpen.value = false
+const openDropdown = () => {
+	dropdown.activeItemIndex = isAsync ? null : search.value ? items?.indexOf(search.value) || null : null
+	dropdown.open = true
+	// TODO: this should probably call the async function if it's async
+	dropdown.results = isAsync ? [] : items
+}
 
-	// TODO: (test) when would this occur? how should this be tested?
-	if (!items.includes(search.value)) {
+const closeDropdown = (result?: string) => {
+	dropdown.activeItemIndex = null
+	dropdown.open = false
+	if (!items?.includes(result || search.value || '')) {
 		search.value = ''
 	}
 }
 
-const onArrowDown = () => {
-	if (arrowCounter.value < results.value.length) {
-		arrowCounter.value = arrowCounter.value + 1
+const filterResults = () => {
+	if (!search.value) {
+		dropdown.results = items
+	} else {
+		dropdown.results = items?.filter(item => item.toLowerCase().includes((search.value ?? '').toLowerCase()))
 	}
 }
 
-const onArrowUp = () => {
-	if (arrowCounter.value > 0) {
-		arrowCounter.value = arrowCounter.value - 1
+const selectNextResult = () => {
+	const resultsLength = dropdown.results?.length || 0
+	if (dropdown.activeItemIndex != null) {
+		const currentIndex = isNaN(dropdown.activeItemIndex) ? 0 : dropdown.activeItemIndex
+		dropdown.activeItemIndex = (currentIndex + 1) % resultsLength
+	} else {
+		dropdown.activeItemIndex = 0
 	}
 }
 
-const onEnter = () => {
-	search.value = results.value[arrowCounter.value]
-	closeResults()
-	arrowCounter.value = 0
+const selectPrevResult = () => {
+	const resultsLength = dropdown.results?.length || 0
+	if (dropdown.activeItemIndex != null) {
+		const currentIndex = isNaN(dropdown.activeItemIndex) ? 0 : dropdown.activeItemIndex
+		dropdown.activeItemIndex = (currentIndex - 1 + resultsLength) % resultsLength
+	} else {
+		dropdown.activeItemIndex = resultsLength - 1
+	}
 }
 
-// const openWithSearch = () => {
-// 	search.value = ''
-// 	onChange()
-// 	mopInput.value.focus()
-// }
+const setCurrentResult = () => {
+	if (dropdown.results) {
+		const currentIndex = dropdown.activeItemIndex || 0
+		const result = dropdown.results[currentIndex]
+		setResult(result)
+	}
+	dropdown.activeItemIndex = 0
+}
 </script>
 
 <style scoped>
@@ -126,7 +132,6 @@ const onEnter = () => {
 }
 
 .input-wrapper {
-	min-width: 40ch;
 	border: 1px solid transparent;
 	padding: 0rem;
 	margin: 0rem;
@@ -167,13 +172,14 @@ label {
 .autocomplete-results {
 	position: absolute;
 	width: calc(100% - 1ch + 1.5px);
-	z-index: 1;
+	z-index: 999;
 	padding: 0;
 	margin: 0;
-	color: #000000;
+	color: var(--sc-input-active-border-color);
 	border: 1px solid var(--sc-input-active-border-color);
 	border-radius: 0 0 0.25rem 0.25rem;
 	border-top: none;
+	background-color: #fff;
 }
 
 .autocomplete-result {
@@ -181,11 +187,12 @@ label {
 	text-align: left;
 	padding: 4px 6px;
 	cursor: pointer;
+	border-bottom: 0.5px solid lightgray;
 }
 
 .autocomplete-result.is-active,
 .autocomplete-result:hover {
 	background-color: var(--sc-row-color-zebra-light);
-	color: #000000;
+	color: var(--sc-input-active-border-color);
 }
 </style>
diff --git a/aform/tests/dropdown.spec.ts b/aform/tests/dropdown.spec.ts
index 7508bc45..455d9ca5 100644
--- a/aform/tests/dropdown.spec.ts
+++ b/aform/tests/dropdown.spec.ts
@@ -1,5 +1,5 @@
-import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
+import { describe, it, expect, vi } from 'vitest'
 
 import ADropdown from '../src/components/form/ADropdown.vue'
 
@@ -56,6 +56,7 @@ describe('dropdown input component', () => {
 
 		// arrow down to select the second item
 		await input.trigger('keydown', { key: 'ArrowDown' })
+		await input.trigger('keydown', { key: 'ArrowDown' })
 		await input.trigger('keydown', { key: 'Enter' })
 
 		updateEvents = wrapper.emitted('update:modelValue')
@@ -78,9 +79,9 @@ describe('dropdown input component', () => {
 		expect(updateEvents![3]).toEqual(['Apple'])
 	})
 
-	it('emits filter change event when dropdown item is selected using mouse in async', async () => {
+	it('emits filter change event when dropdown item is selected using mouse in sync', async () => {
 		const wrapper = mount(ADropdown, {
-			props: { modelValue: dropdownData.value, label: dropdownData.label, items: dropdownData.items, isAsync: true },
+			props: { modelValue: dropdownData.value, label: dropdownData.label, items: dropdownData.items, isAsync: false },
 		})
 
 		await wrapper.find('input').setValue('')
@@ -94,11 +95,39 @@ describe('dropdown input component', () => {
 		await wrapper.vm.$nextTick()
 
 		valueUpdateEvents = wrapper.emitted('update:modelValue')
-		expect(valueUpdateEvents).toHaveLength(1)
-		expect(valueUpdateEvents![0]).toEqual([''])
+		expect(valueUpdateEvents).toHaveLength(2)
+		expect(valueUpdateEvents![1]).toEqual(['Apple'])
+	})
+
+	it('emits filter change event when dropdown item is selected using mouse in async', async () => {
+		const mockFilterFunction = vi.fn(search => {
+			if (search === 'a') {
+				return ['Apple', 'Orange', 'Pear']
+			}
+			return []
+		})
 
-		const filterChangedEvents = wrapper.emitted('filterChanged')
-		expect(filterChangedEvents).toHaveLength(1)
-		expect(filterChangedEvents![0]).toEqual([''])
+		const wrapper = mount(ADropdown, {
+			props: {
+				modelValue: dropdownData.value,
+				label: dropdownData.label,
+				items: dropdownData.items,
+				isAsync: true,
+				filterFunction: mockFilterFunction,
+			},
+		})
+
+		const input = wrapper.find('input')
+		await input.setValue('a')
+		await wrapper.vm.$nextTick()
+
+		expect(mockFilterFunction).toHaveBeenCalledWith('a')
+		expect(mockFilterFunction).toHaveBeenCalledTimes(1)
+
+		const liElements = wrapper.findAll('li')
+		expect(liElements).toHaveLength(3)
+		expect(liElements.at(0)?.text()).toBe('Apple')
+		expect(liElements.at(1)?.text()).toBe('Orange')
+		expect(liElements.at(2)?.text()).toBe('Pear')
 	})
 })
diff --git a/common/changes/@stonecrop/aform/fix-adropdown_2025-01-10-17-54.json b/common/changes/@stonecrop/aform/fix-adropdown_2025-01-10-17-54.json
new file mode 100644
index 00000000..cf3d54d8
--- /dev/null
+++ b/common/changes/@stonecrop/aform/fix-adropdown_2025-01-10-17-54.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/aform",
+      "comment": "allow external clicks, fix on result selection and clear search when necesary\"",
+      "type": "none"
+    }
+  ],
+  "packageName": "@stonecrop/aform"
+}
\ No newline at end of file
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
index 13203ecc..53ab7160 100644
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
@@ -18,6 +18,9 @@ importers:
       '@stonecrop/utilities':
         specifier: workspace:*
         version: link:../utilities
+      '@vueuse/components':
+        specifier: ^12.0.0
+        version: 12.4.0(typescript@5.7.2)
       '@vueuse/core':
         specifier: ^12.0.0
         version: 12.0.0(typescript@5.7.2)
@@ -1601,24 +1604,36 @@ packages:
   '@vueuse/components@12.0.0':
     resolution: {integrity: sha512-XpOoBXYRuFuUiiq+HsMX6rGzqvcHdKnbT4sbR0FHYxwSGBHO3Zli8pPTZoLRNBGp4CGov7BRCnANEK/1Ch/6tQ==}
 
+  '@vueuse/components@12.4.0':
+    resolution: {integrity: sha512-SVg7ymnBP7u814D1S+OfTIinT7Jq978/0wLgoS8knwDVZplPzn0zFrs+/fl8dcdeYGIv5hU45X0/+EUBEUFQDg==}
+
   '@vueuse/core@10.11.1':
     resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
 
   '@vueuse/core@12.0.0':
     resolution: {integrity: sha512-C12RukhXiJCbx4MGhjmd/gH52TjJsc3G0E0kQj/kb19H3Nt6n1CA4DRWuTdWWcaFRdlTe0npWDS942mvacvNBw==}
 
+  '@vueuse/core@12.4.0':
+    resolution: {integrity: sha512-XnjQYcJwCsyXyIafyA6SvyN/OBtfPnjvJmbxNxQjCcyWD198urwm5TYvIUUyAxEAN0K7HJggOgT15cOlWFyLeA==}
+
   '@vueuse/metadata@10.11.1':
     resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
 
   '@vueuse/metadata@12.0.0':
     resolution: {integrity: sha512-Yzimd1D3sjxTDOlF05HekU5aSGdKjxhuhRFHA7gDWLn57PRbBIh+SF5NmjhJ0WRgF3my7T8LBucyxdFJjIfRJQ==}
 
+  '@vueuse/metadata@12.4.0':
+    resolution: {integrity: sha512-AhPuHs/qtYrKHUlEoNO6zCXufu8OgbR8S/n2oMw1OQuBQJ3+HOLQ+EpvXs+feOlZMa0p8QVvDWNlmcJJY8rW2g==}
+
   '@vueuse/shared@10.11.1':
     resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
 
   '@vueuse/shared@12.0.0':
     resolution: {integrity: sha512-3i6qtcq2PIio5i/vVYidkkcgvmTjCqrf26u+Fd4LhnbBmIT6FN8y6q/GJERp8lfcB9zVEfjdV0Br0443qZuJpw==}
 
+  '@vueuse/shared@12.4.0':
+    resolution: {integrity: sha512-9yLgbHVIF12OSCojnjTIoZL1+UA10+O4E1aD6Hpfo/DKVm5o3SZIwz6CupqGy3+IcKI8d6Jnl26EQj/YucnW0Q==}
+
   abab@2.0.6:
     resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==}
     deprecated: Use your platform's native atob() and btoa() methods instead
@@ -4931,6 +4946,14 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
+  '@vueuse/components@12.4.0(typescript@5.7.2)':
+    dependencies:
+      '@vueuse/core': 12.4.0(typescript@5.7.2)
+      '@vueuse/shared': 12.4.0(typescript@5.7.2)
+      vue: 3.5.13(typescript@5.7.2)
+    transitivePeerDependencies:
+      - typescript
+
   '@vueuse/core@10.11.1(vue@3.5.13(typescript@5.7.2))':
     dependencies:
       '@types/web-bluetooth': 0.0.20
@@ -4950,10 +4973,21 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
+  '@vueuse/core@12.4.0(typescript@5.7.2)':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 12.4.0
+      '@vueuse/shared': 12.4.0(typescript@5.7.2)
+      vue: 3.5.13(typescript@5.7.2)
+    transitivePeerDependencies:
+      - typescript
+
   '@vueuse/metadata@10.11.1': {}
 
   '@vueuse/metadata@12.0.0': {}
 
+  '@vueuse/metadata@12.4.0': {}
+
   '@vueuse/shared@10.11.1(vue@3.5.13(typescript@5.7.2))':
     dependencies:
       vue-demi: 0.14.10(vue@3.5.13(typescript@5.7.2))
@@ -4967,6 +5001,12 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
+  '@vueuse/shared@12.4.0(typescript@5.7.2)':
+    dependencies:
+      vue: 3.5.13(typescript@5.7.2)
+    transitivePeerDependencies:
+      - typescript
+
   abab@2.0.6: {}
 
   abbrev@2.0.0: {}
diff --git a/examples/aform/dropdown.story.vue b/examples/aform/dropdown.story.vue
index 59c8a203..b88f76b5 100644
--- a/examples/aform/dropdown.story.vue
+++ b/examples/aform/dropdown.story.vue
@@ -1,25 +1,36 @@
 <template>
 	<Story>
 		<div class="dropdown-form">
+			<!-- normal dropdown story -->
 			<ADropdown
 				data-theme="purple"
 				:items="dropdown_data.items"
 				v-model="dropdown_data.value"
 				:label="dropdown_data.label" />
+
+			<!-- dropdown with API request simulation -->
 			<ADropdown
 				:items="async_dropdown_data.items"
 				v-model="async_dropdown_data.value"
 				:label="async_dropdown_data.label"
 				:isAsync="true"
-				@filterChanged="val => filterItems(val)" />
+				:filterFunction="asyncFilterItems" />
+
+			<!-- dropdown with custom filtering logic -->
+			<ADropdown
+				:items="custom_filter_dropdown_data.items"
+				v-model="custom_filter_dropdown_data.value"
+				:label="custom_filter_dropdown_data.label"
+				:isAsync="false"
+				:filterFunction="filterItems" />
 		</div>
 	</Story>
 </template>
 
-<script lang="ts" setup>
-import { reactive, ref } from 'vue'
+<script setup lang="ts">
+import { reactive } from 'vue'
 
-const dropdown_data = ref({
+const dropdown_data = reactive({
 	items: ['Apple', 'Orange', 'Pear', 'Kiwi', 'Grape'],
 	value: 'Orange',
 	label: 'Fruit',
@@ -32,26 +43,43 @@ const async_dropdown_data = reactive({
 	label: 'Animals',
 })
 
+const custom_filter_dropdown_data = reactive({
+	allItems: ['Pizza', 'Burger', 'Pasta', 'Sushi', 'Tacos', 'Salad', 'Steak', 'Soup'],
+	items: ['Pizza', 'Burger', 'Pasta', 'Sushi', 'Tacos', 'Salad', 'Steak', 'Soup'],
+	value: '',
+	label: 'Food',
+})
+
+async function asyncFilterItems(search: string) {
+	// introduce a delay to simulate an async request
+	await delay(750)
+	const filtered = async_dropdown_data.allItems.filter(item => item.toLowerCase().includes(search.toLowerCase()))
+	async_dropdown_data.items = filtered
+	return filtered
+}
+
 function filterItems(search: string) {
-	setTimeout(() => {
-		async_dropdown_data.items = async_dropdown_data.allItems.filter(item => {
-			return item.toLowerCase().indexOf(search.toLowerCase()) > -1
-		})
-	}, 750)
+	const filtered = custom_filter_dropdown_data.allItems.filter(item =>
+		item.toLowerCase().startsWith(search.toLowerCase())
+	)
+	custom_filter_dropdown_data.items = filtered
+	return filtered
+}
+
+function delay(ms: number) {
+	return new Promise(resolve => setTimeout(resolve, ms))
 }
 </script>
 
 <style>
 .dropdown-form {
 	min-height: 60px;
+	height: 800px;
 	display: flex;
 	flex-direction: row;
-	align-items: center;
+	align-items: top;
 	margin: 0px;
 	padding-left: 1ch;
 	padding-right: 1ch;
 }
 </style>
-
-<!-- enter documentation here -->
-<docs lang="md"></docs>