I have a select component that should initialize its value based on a URL query parameter. It works correctly in preview mode but fails in production — always showing the default value instead of the query parameter value.
Setup:
-
Query variable
country(Type: Query, Default: “US”, Save in local storage: Yes) -
Static variable with countries array:
[
{ "name": "Afghanistan", "alpha-2": "AF", "phoneCode": "93", ... },
{ "name": "France", "alpha-2": "FR", "phoneCode": "33", ... },
...
]
- Select options formula:
return variables['a9bd69fa-0035-4a70-82ce-b8a54cdeaac5'].map(country => ({
label: country.name,
value: country['alpha-2'],
icon: country['alpha-2'].toLowerCase(),
phoneCountryCode: wwFormulas.concatenate("+", country['phoneCode'])
}));
- Value per item:
context.mapping?.['phoneCountryCode'](returns “+33” for France) - Initial value (single) formula:
const countries = variables['a9bd69fa-0035-4a70-82ce-b8a54cdeaac5'];
const countryCode = variables['country'];
const found = countries.find(c => c['alpha-2'] === countryCode);
return found ? wwFormulas.concatenate("+", found['phoneCode']) : "+1"
```
**Behavior:**
- **Preview:** Navigate to `?country=FR` → Select correctly shows France (+33) ✅
- **Production:** Navigate to `?country=FR` → Select shows US (+1) ❌
**Debug console shows:**
```
Setting value for country
"FR"
Updating localStorage to synchronize with country
So the query parameter IS being read correctly, but the select doesn’t reflect it.
What I’ve tried:
-
“Preserve on navigation” → No effect
-
“On mounted” workflow to set the value → No effect
-
Adding delays (100ms, 1 second) before setting value → No effect
-
Checking local storage (variable not stored there despite setting)
-
Tested with single query param only → Same issue
Is there a known timing issue with query variables and select initial values in production? How can I ensure the select initializes with the correct value from the query parameter without adding loading states or delays?
