diff --git a/src/templates/_components/app/address-region-field.twig b/src/templates/_components/app/address-region-field.twig
index a625167..12800f9 100644
--- a/src/templates/_components/app/address-region-field.twig
+++ b/src/templates/_components/app/address-region-field.twig
@@ -40,22 +40,24 @@
});
}
"
+ {# Use h-0/overflow-hidden instead of x-show (display:none) or invisible (visibility:hidden)
+ so Chrome mobile can still autofill the input inside — it skips both display:none and
+ visibility:hidden inputs. #}
+ :class="currentRegions.length > 0 ? '' : 'h-0 overflow-hidden'"
>
-
- {% 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'
- } %}
-
+ {% 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'
+ } %}
diff --git a/src/templates/_components/base/input-select-searchable.twig b/src/templates/_components/base/input-select-searchable.twig
index 12b2741..106336d 100644
--- a/src/templates/_components/base/input-select-searchable.twig
+++ b/src/templates/_components/base/input-select-searchable.twig
@@ -99,6 +99,7 @@
@keydown.enter.prevent="open ? selectActiveOption() : toggleListbox()"
@keydown="onTriggerKeydown($event)"
@input="onTriggerInput($event)"
+ @change="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"
diff --git a/src/web/assets/checkout/dist/js/alpine.js b/src/web/assets/checkout/dist/js/alpine.js
index 4de85a6..70bc9a8 100644
--- a/src/web/assets/checkout/dist/js/alpine.js
+++ b/src/web/assets/checkout/dist/js/alpine.js
@@ -121,6 +121,11 @@ const SearchableSelect = (props) => {
if (input && input.value && !this.selectedOption) {
this.selectByValue(input.value);
}
+
+ // Auto-select if there's only one option
+ if (!this.selectedOption && o.length === 1) {
+ this.selectedOption = o[0];
+ }
});
});
@@ -147,6 +152,13 @@ const SearchableSelect = (props) => {
})
}
});
+
+ // Auto-select if there's only one option (deferred so watchers are active)
+ this.$nextTick(() => {
+ if (!this.selectedOption && this.options.length === 1) {
+ this.selectedOption = this.options[0];
+ }
+ });
},
/**