diff --git a/src/templates/_components/app/address-fields.twig b/src/templates/_components/app/address-fields.twig
index 22f9ab9..c7dd015 100644
--- a/src/templates/_components/app/address-fields.twig
+++ b/src/templates/_components/app/address-fields.twig
@@ -70,7 +70,8 @@ since the array key will be the same #}
 			placeholder: 'addressFields.select'|t('foster-checkout'),
 			required: true,
 			value: address ? address.countryCode : '',
-			errors: errors.countryCode ?? []
+			errors: errors.countryCode ?? [],
+			autocomplete: 'country-name'
 		} %}
 		<template x-if="'countryCode' in errors">
 			<div
@@ -181,7 +182,7 @@ since the array key will be the same #}
 			{% if customField.multiline %}
 
 				<label for="{{ ('custom-field-' ~ customField.handle)|namespaceInputId(context) }}"
-							 class="block text-sm font-medium text-gray-700">
+					   class="block text-sm font-medium text-gray-700">
 					{{ customField.name|t('foster-checkout') }}{% if customField.required %}*{% endif %}
 				</label>
 
diff --git a/src/templates/_components/app/address-region-field.twig b/src/templates/_components/app/address-region-field.twig
index b7fdea3..a625167 100644
--- a/src/templates/_components/app/address-region-field.twig
+++ b/src/templates/_components/app/address-region-field.twig
@@ -24,30 +24,38 @@
 
 <div
 	x-data="{
-		regions: {{ countriesAndRegions|json_encode }},
-		initialRegions: [],
-	}"
-	x-init="initialRegions = regions[countryCode] ?? []"
+       regions: {{ countriesAndRegions|json_encode }},
+       initialRegions: [],
+       currentRegions: [],
+    }"
+	x-init="
+       initialRegions = regions[countryCode] ?? [];
+       currentRegions = initialRegions;
+    "
 	@selected.window="
-		if ($event.detail.name === '{{ context|default ? (context ~ "[countryCode]") : "countryCode" }}') {
-			$dispatch('addressregions', regions[$event.detail.value]);
-		}
-	"
+       if ($event.detail.name === '{{ context|default ? (context ~ "[countryCode]") : "countryCode" }}') {
+          currentRegions = regions[$event.detail.value] ?? [];
+          $nextTick(() => {
+             $dispatch('addressregions', currentRegions);
+          });
+       }
+    "
 >
-				<div>
-					{% include 'foster-checkout/_components/base/input-select-searchable' with {
-						context: context,
-						id: 'administrativeArea',
-						model: 'administrativeArea',
-						name: 'administrativeArea',
-						options: 'initialRegions',
-						eventName: 'addressregions',
-						fallbackOptions: fallbackOptions,
-						label: 'addressFields.stateLabel'|t('foster-checkout'),
-						placeholder: 'addressFields.select'|t('foster-checkout'),
-						required: true,
-						value: address ? address.administrativeArea : '',
-						errors: errors.administrativeArea ?? []
-					} %}
-				</div>
+	<div x-show="currentRegions.length > 0">
+		{% include 'foster-checkout/_components/base/input-select-searchable' with {
+			context: context,
+			id: 'administrativeArea',
+			model: 'administrativeArea',
+			name: 'administrativeArea',
+			options: 'initialRegions',
+			eventName: 'addressregions',
+			fallbackOptions: fallbackOptions,
+			label: 'addressFields.stateLabel'|t('foster-checkout'),
+			placeholder: 'addressFields.select'|t('foster-checkout'),
+			required: true,
+			value: address ? address.administrativeArea : '',
+			errors: errors.administrativeArea ?? [],
+			autocomplete: 'address-level1'
+		} %}
+	</div>
 </div>
diff --git a/src/templates/_components/base/input-select-searchable.twig b/src/templates/_components/base/input-select-searchable.twig
index d374397..8e07496 100644
--- a/src/templates/_components/base/input-select-searchable.twig
+++ b/src/templates/_components/base/input-select-searchable.twig
@@ -9,6 +9,7 @@
 {% set model = model ?? '' %}
 {% set options = options ?? [] %}
 {% set placeholder = placeholder ?? 'Select' %}
+{% set autocomplete = autocomplete ?? 'off' %}
 
 {% set fallbackOptions = fallbackOptions|default ? fallbackOptions : options %}
 {% set fallbackClasses = ['w-full h-12 px-4 bg-white rounded-lg focus:!ring-0 focus:!outline-none placeholder:text-gray-400 transition-color duration-300'] %}
@@ -81,47 +82,51 @@
 			</label>
 		{% endif %}
 
-		<!-- Button that behaves like a native select -->
-		<button
-			type="button"
-			x-ref="button"
-			:id="buttonId()"
-			@focus="toggleListbox()"
-			@keydown.arrow-down.prevent="openListbox()"
-			@keydown.arrow-up.prevent="openListbox()"
-			@keydown.enter.prevent="toggleListbox()"
-			@keydown.space.prevent="toggleListbox()"
-			class="relative w-full py-[11px] pl-3 pr-10 rounded-lg cursor-default border bg-white text-left focus:!ring-0 focus:!outline-none transition-color duration-300"
-			:class="errors.length ? 'border-red-500 focus:border-red-500' : 'border-gray-250 focus:border-black'"
-			aria-haspopup="listbox"
-			:aria-expanded="open ? 'true' : 'false'"
-			:aria-labelledby="labelId()"
-			:aria-controls="listboxId()"
-			tabindex="0"
-		>
-			<span class="block truncate" x-text="buttonLabel"></span>
+		<!-- Text input trigger — visible to browsers for autofill, styled like a select -->
+		<div class="relative">
+			<input
+				type="text"
+				x-ref="button"
+				:id="buttonId()"
+				:name="`${name}_display`"
+				:required="required && options.length > 0"
+				:value="buttonLabel === placeholder ? '' : buttonLabel"
+				:placeholder="placeholder"
+				autocomplete="{{ autocomplete }}"
+				@click="toggleListbox()"
+				@keydown.arrow-down.prevent="openListbox()"
+				@keydown.arrow-up.prevent="openListbox()"
+				@keydown.enter.prevent="open ? selectActiveOption() : toggleListbox()"
+				@keydown="onTriggerKeydown($event)"
+				@input="onTriggerInput($event)"
+				class="w-full py-[11px] pl-3 pr-10 rounded-lg cursor-default border bg-white text-left focus:!ring-0 focus:!outline-none transition-color duration-300 caret-transparent"
+				:class="errors.length ? 'border-red-500 focus:border-red-500' : 'border-gray-250 focus:border-black'"
+				aria-haspopup="listbox"
+				:aria-expanded="open ? 'true' : 'false'"
+				:aria-labelledby="labelId()"
+				:aria-controls="listboxId()"
+			/>
 			<span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
 				<svg class="h-6 w-6" viewBox="0 0 20 20" fill="none" aria-hidden="true">
 					<path stroke='#6B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'></path>
 				</svg>
 			</span>
-		</button>
+		</div>
 
 		<!-- Hidden input for form submission (server sees just the value/code) -->
 		<input
-			type="text"
-			class="w-0 h-0 opacity-0 absolute pointer-events-none"
+			type="hidden"
 			:name="name"
+			:value="modelValue ?? ''"
 			:aria-invalid="errors.length ? true : false"
 			:aria-errormessage="errorId()"
 			x-ref="hiddenValue"
-			@input="selectByValue($event.target.value)"
 		/>
 
 		<!-- Dropdown -->
 		<div
 			x-show="open"
-			x-trap.inert.noreturn="open"
+			x-trap.inert="open"
 			class="relative"
 		>
 			<div
@@ -137,6 +142,7 @@
 						x-ref="search"
 						type="text"
 						x-model="search"
+						autocomplete="off"
 						role="searchbox"
 						:aria-controls="listboxId()"
 						:aria-activedescendant="open && hasOptions ? optionId(activeIndex) : null"
diff --git a/src/web/assets/checkout/dist/js/alpine.js b/src/web/assets/checkout/dist/js/alpine.js
index ee7ff8d..4de85a6 100644
--- a/src/web/assets/checkout/dist/js/alpine.js
+++ b/src/web/assets/checkout/dist/js/alpine.js
@@ -113,8 +113,15 @@ const SearchableSelect = (props) => {
 					const value = this.tmpInputEventValue;
 					this.tmpInputEventValue = null;
 
-					this.selectedOption = this.options.find(matchOptionByValue(value)) || null;
+					this.selectByValue(value);
 				}
+
+				this.$nextTick(() => {
+					const input = this.$refs.button;
+					if (input && input.value && !this.selectedOption) {
+						this.selectByValue(input.value);
+					}
+				});
 			});
 
 			// parent -> child
@@ -142,6 +149,65 @@ const SearchableSelect = (props) => {
 			});
 		},
 
+		/**
+		 * Called when the trigger input receives an `input` event.
+		 * Handles two scenarios:
+		 *   a) Browser autofill just set the value — match it to an option
+		 *   b) User is typing directly — open dropdown and pipe text into search
+		 */
+		onTriggerInput(event) {
+			if (this._keydownHandled) {
+				this._keydownHandled = false;
+				event.target.value = this.selectedOption ? this.selectedOption.label : '';
+				return;
+			}
+
+			const val = event.target.value;
+
+			// Try autofill match first
+			if (this.selectByValue(val)) return;
+
+			// If value was stored as pending (options not loaded yet), don't open dropdown
+			if (this.tmpInputEventValue) return;
+
+			// Not an autofill match — user is typing.
+			// Open the dropdown and forward their text into the search field.
+			if (!this.open) {
+				this.open = true;
+				this.resetActiveIndex();
+			}
+
+			this.$nextTick(() => {
+				if (this.$refs.search) {
+					this.$refs.search.value = val;
+					this.search = val;
+				}
+				// Reset the trigger input to the current selection
+				event.target.value = this.selectedOption ? this.selectedOption.label : '';
+			});
+		},
+
+		/**
+		 * When the user presses a printable key on the trigger input,
+		 * open the dropdown so typing flows into the search field.
+		 */
+		onTriggerKeydown(event) {
+			if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+				if (!this.open) {
+					this._keydownHandled = true;
+					this.openListbox();
+					setTimeout(() => {
+						if (this.$refs.search) {
+							this.$refs.search.value = event.key;
+							this.search = event.key;
+							const len = this.$refs.search.value.length;
+							this.$refs.search.setSelectionRange(len, len);
+						}
+					}, 50);
+				}
+			}
+		},
+
 		get buttonLabel() {
 			return this.selectedOption ? this.selectedOption.label : this.placeholder;
 		},
@@ -233,9 +299,6 @@ const SearchableSelect = (props) => {
 
 		closeAndFocusButton() {
 			this.closeListbox();
-			this.$nextTick(() => {
-				this.$refs.button.focus();
-			});
 		},
 
 		resetActiveIndex() {
@@ -290,8 +353,13 @@ const SearchableSelect = (props) => {
 
 		// --- selection ---
 		selectOption(option) {
+			const wasOpen = this.open;
 			this.selectedOption = option; // watcher will push value into modelValue
-			this.closeListbox();
+			if (wasOpen) {
+				this.closeAndFocusButton();
+			} else {
+				this.closeListbox();
+			}
 		},
 
 		isSelected(option) {
@@ -304,14 +372,41 @@ const SearchableSelect = (props) => {
 			// When the form is autofilled, we can't assume the options will be immediately available if they've
 			// been changed based on some other field's value. So we set a temporary value if we don't match
 			// anything at this point.
-			this.tmpInputEventValue = value;
-			const selectedOption = this.options.find(matchOptionByValue(value)) || null;
+			if (!value) {
+				return null;
+			}
+
+			const q = value.toLowerCase().trim();
+
+			// Exact match on label
+			let selectedOption = this.options.find(o => String(o.label).toLowerCase() === q);
+
+			// Exact match on value/code (e.g. "CA", "US")
+			if (!selectedOption) {
+				selectedOption = this.options.find(o => String(o.value).toLowerCase() === q);
+			}
+
+			// Fuzzy: starts-with on label
+			if (!selectedOption) {
+				selectedOption = this.options.find(o => String(o.label).toLowerCase().startsWith(q));
+			}
+
+			// Fuzzy: includes on label
+			if (!selectedOption) {
+				selectedOption = this.options.find(o => String(o.label).toLowerCase().includes(q));
+			}
 
 			if (selectedOption) {
 				// If we found the option, we can clear this value
 				this.tmpInputEventValue = null;
 				this.selectedOption = selectedOption;
+				return selectedOption;
 			}
+
+			// No match — store as pending for when options load (e.g. state autofilled before country)
+			this.tmpInputEventValue = value;
+
+			return null;
 		},
 
 		updateLastPinned(event) {
@@ -326,12 +421,6 @@ const SearchableSelect = (props) => {
 	};
 };
 
-const matchOptionByValue = (value) => {
-	const lowercaseValue = value.toLowerCase();
-	return (option) => option.label.toLowerCase() === lowercaseValue
-		|| option.value.toLowerCase() === lowercaseValue;
-}
-
 const LineItem = (props) => {
 	return {
 		id: props.lineItemId,
diff --git a/src/web/assets/checkout/dist/js/app.js b/src/web/assets/checkout/dist/js/app.js
deleted file mode 100644
index 739a249..0000000
--- a/src/web/assets/checkout/dist/js/app.js
+++ /dev/null
@@ -1,307 +0,0 @@
-import {createApp, reactive} from 'https://unpkg.com/petite-vue?module';
-
-const App = reactive({
-	loaded: false,
-
-	init() {
-		this.loaded = true;
-		Hide();
-	}
-});
-
-const ClearableInput = (props) => {
-	return {
-		name: props.name,
-		value: props.value,
-		countryCode: props.countryCode,
-		requiredFields: props.requiredFields,
-		required: props.required,
-		errors: props.errors,
-		success: props.success,
-		showButton: false,
-		input() {
-			this.showButton = this.value !== '';
-			this.errors = [];
-		},
-		focus() {
-			this.showButton = this.value !== '';
-		},
-		blur($el) {
-			const button = $el.closest('div').querySelector('button');
-			this.showButton = (button === document.activeElement) && (this.value !== '');
-		},
-		clear($el) {
-			this.value = '';
-			this.errors = [];
-			const input = $el.closest('div').querySelector('input.js-clearable, textarea.js-clearable');
-			input.focus();
-		},
-		isRequired() {
-			// If its a boolean, then we return that, not what the address formatter indicates.
-			if (typeof this.required === 'boolean') {
-				return this.required;
-			}
-
-			// If its a string, then we check if that value is in the requiredFields object
-			if (typeof this.required === 'string') {
-				return this.requiredFields()[this.countryCode()]?.includes(this.required) ?? false;
-			}
-
-			if (!this.requiredFields) {
-				return false;
-			}
-
-			try {
-				let countryCode = this.countryCode() ?? '';
-				let requiredFields = this.requiredFields() ?? {};
-
-				// Check if countryCode and requiredFields are defined
-				if (!countryCode || !requiredFields) {
-					return false;
-				}
-
-				// Otherwise we check if the field name is in the requiredFields object
-				return requiredFields[countryCode]?.includes(this.name) ?? false;
-			} catch (error) {
-				// Somehow there is a moment where the countryCode and requiredFields are not defined
-				// This is a temporary fix to prevent the error log - no functionality is broken.
-				return false;
-			}
-		}
-	}
-};
-
-async function callAction(url, body = {}, method = 'POST') {
-	return await fetch(url, {
-		headers: {
-			'Accept': 'application/json',
-			'X-Requested-With': 'XMLHttpRequest'
-		},
-		method,
-		body,
-	})
-}
-
-const Payment = (props) => {
-	return {
-		gatewayId: props.gatewayId,
-		billingSameAsShipping: props.billingSameAsShipping,
-		addressBookBillingAddress: props.addressBookBillingAddress,
-		newBillingAddress: props.newBillingAddress,
-		billingAddressId: props.billingAddressId,
-		editAddress: props.editAddress,
-		async selectSameAsShipping() {
-			this.editAddress = 0;
-			this.newBillingAddress = 0;
-			this.billingSameAsShipping = 1;
-			this.addressBookBillingAddress = 0;
-			this.billingAddressId = null;
-
-			callAction(
-				'/actions/commerce/cart/update-cart',
-				new FormData(document.querySelector(`#sameAsShippingForm`))
-			);
-		},
-		async selectAddress() {
-			this.editAddress = 0;
-			this.newBillingAddress = 0;
-			this.billingSameAsShipping = 0;
-			this.addressBookBillingAddress = 1;
-
-			callAction(
-				'/actions/commerce/cart/update-cart',
-				new FormData(document.querySelector(`#addressBookForm`))
-			);
-		},
-	}
-};
-
-const debounce = (wait, callback) => {
-	let timeoutId = null;
-
-	return function (...args) {
-		window.clearTimeout(timeoutId);
-
-		function execFn() {
-			callback.apply(this, ...args);
-		}
-
-		timeoutId = window.setTimeout(() => execFn.apply(this), wait);
-	};
-};
-
-const LineItem = (props) => {
-	return {
-		id: props.lineItemId,
-		qty: props.qty,
-		min: props.min,
-		max: props.max,
-		stock: props.stock,
-		unlimitedStock: props.unlimitedStock,
-		showErrorMaxMessage: props.showErrorMaxMessage,
-		showErrorMinMessage: props.showErrorMinMessage,
-		showErrorStockMessage: props.showErrorStockMessage,
-		action: '',
-		sending: false,
-		input: debounce(700, function () {
-			this.qty = this.qty.replace(/\D/g, '');
-			if(this.qty) {
-				this.updateQty();
-			}
-		}),
-		increment() {
-			this.removeMessages();
-			this.qty++;
-			this.debounce(1000, this.updateQty());
-		},
-		decrement() {
-			this.removeMessages()
-			if (this.qty === 1) {
-				this.remove();
-			} else {
-				this.qty = this.qty > 1 ? (this.qty - 1) : 1;
-				this.debounce(1000, this.updateQty());
-			}
-		},
-		async remove() {
-			const form = document.querySelector(`#lineItemQty-${props.id}`);
-			const formData = new FormData(form)
-			formData.set(`lineItems[${props.id}][remove]`, true);
-			this.action = 'remove';
-			this.sending = true;
-
-			await fetch('/actions/commerce/cart/update-cart', {
-				method: 'POST',
-				headers: {
-					'Accept': 'application/json',
-					'X-Requested-With': 'XMLHttpRequest'
-				},
-				body: formData,
-			})
-				.then(response => {
-					if (!response.ok) {
-						throw new Error('Network response was not ok');
-					}
-					return response.json();
-				})
-				.then(data => {
-					// TEMP: Reloading here to refresh the cart page instead of updating the data via ajax
-					location.reload();
-					/*
-					// we should only do this if the ajax operation was successful
-					const container = form.closest('article');
-					container.remove();
-					*/
-				})
-				.catch(error => {
-					console.error('Error:', error);
-				});
-
-		},
-		blur() {
-			this.qty = this.qty === '' ? 0 : this.qty;
-		},
-		removeMessages() {
-			this.showErrorMaxMessage = false;
-			this.showErrorMinMessage = false;
-			this.showErrorStockMessage = false;
-		},
-		async updateQty() {
-			if (this.unlimitedStock === 0 && this.qty > this.stock) {
-				this.qty = this.stock;
-				this.showErrorStockMessage = true;
-			} else if (this.qty < this.min && this.min != 0) {
-				this.qty = this.min;
-				this.showErrorMinMessage = true;
-			} else if (this.unlimitedStock && this.max && this.qty > this.max) {
-				this.qty = this.max;
-				this.showErrorMaxMessage = true;
-			} else {
-				props.qty = this.qty;
-				// UpdateQty(props);
-
-				const form = document.querySelector(`#lineItemQty-${props.id}`);
-				const formData = new FormData(form)
-				formData.set(`lineItems[${props.id}][qty]`, props.qty);
-				this.action = 'update';
-				this.sending = true;
-
-				await fetch('/actions/commerce/cart/update-cart', {
-					method: 'POST',
-					headers: {
-						'Accept': 'application/json',
-						'X-Requested-With': 'XMLHttpRequest'
-					},
-					body: formData,
-				})
-					.then(response => {
-						if (!response.ok) {
-							throw new Error('Network response was not ok');
-						}
-						return response.json();
-					})
-					.then(data => {
-						// TEMP: Reloading here to refresh the cart page instead of updating the data via ajax
-						location.reload();
-					})
-					.catch(error => {
-						console.error('Error:', error);
-					});
-			}
-		}
-	}
-};
-
-
-const FocusModal = (props) => {
-	return {
-		isOpen: props.isOpen,
-		toggleModal() {
-			this.isOpen = !this.isOpen;
-		},
-		mounted() {
-			const modal = this.$refs.modal;
-			const focusableEls = modal.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
-			const firstFocusableEl = focusableEls[0];
-			const lastFocusableEl = focusableEls[focusableEls.length - 1];
-			const KEYCODE_TAB = 9;
-
-			modal.addEventListener('keydown', (evt) => {
-				const isTab = (evt.key === 'Tab' || evt.keyCode === KEYCODE_TAB);
-				if (isTab) {
-					if (evt.shiftKey) {
-						if (document.activeElement === firstFocusableEl) {
-							lastFocusableEl.focus();
-							evt.preventDefault();
-						}
-					} else {
-						if (document.activeElement === lastFocusableEl) {
-							firstFocusableEl.focus();
-							evt.preventDefault();
-						}
-					}
-				}
-			});
-		}
-	}
-};
-
-// Hide any elements that we only show if JS doesn't load
-const Hide = () => {
-	const els = document.querySelectorAll('.js-hide')
-	els.forEach((el) => el.classList.add('hidden'));
-}
-
-// Initialize Petite Vue and mount
-createApp({
-	// Set delimiters in Petite Vue so they do not interfere with Twig delimiters
-	$delimiters: ['${', '}'],
-
-	// Include the modules above
-	App,
-	ClearableInput,
-	FocusModal,
-	LineItem,
-	Hide,
-	Payment,
-}).mount();