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]; + } + }); }, /**