, but it does change // which country is in effect, because billingCountryId mirrors the contact one. Watching the // effective value rather than the select's change event is what keeps the options in step — // otherwise the list stays on the formation country's states and the customer's own state // simply isn't in it, so the field reads "Select State" with no way to fix it. async onBillingCountryChanged() { // Only discard the current pick when the customer is choosing a country themselves. // While mirroring the contact address the state is derived, not chosen. if (this.billingAddressSource !== 'contact') { this.billingState = ''; } await this.fetchBillingStateOptions(); }, async fetchBillingStateOptions() { if (!this.billingCountryId) return; this.loadingBillingStates = true; try { const response = await fetch(`/countries/${this.billingCountryId}/states`, { headers: { 'X-Requested-With': 'XMLHttpRequest' } }); this.billingStateOptions = await response.json(); } catch (e) { // Keep the rendered options rather than emptying the select. } this.loadingBillingStates = false; // Heals a draft saved before the contact state's *name* was tracked: now that the right // country's states are loaded, resolve it from the id the order already had. if (this.billingAddressSource === 'contact' && !this.contactStateName && this.contactStateId) { const match = this.billingStateOptions.find((option) => String(option.id) === String(this.contactStateId)); if (match) { this.contactStateName = match.name; } } }, // On restore, or when the billing country isn't the formation country, the options rendered // server-side won't contain the state already chosen — fetch the right ones. async initBillingStateOptions() { const known = this.billingStateOptions.some((option) => option.name === this.billingState); if (this.billingCountryId && (!known || !this.billingState)) { await this.fetchBillingStateOptions(); } }, }" x-init=" $nextTick(() => initBillingStateOptions()); $watch('billingCountryId', () => onBillingCountryChanged()); " >