Open SDeVuystHogent opened 3 months ago
To address the issue where the phone number input defaults to the Netherlands' country code (+31) instead of Belgium's (+32) when the application language is set to Dutch, you can modify the useDefaultCountry
hook within the PhoneInput
component. This modification involves checking the application's language setting and adjusting the default country code based on this setting. Here's a concise way to implement this solution:
const useDefaultCountry = () => {
const [defaultCountry, setDefaultCountry] = useState("us");
const query = trpc.viewer.public.countryCode.useQuery(undefined, {
refetchOnWindowFocus: false,
refetchOnReconnect: false,
retry: false,
});
useEffect(() => {
const data = query.data;
const appLanguage = navigator.language.toLowerCase();
if (appLanguage.includes("nl")) {
setDefaultCountry("be"); // Set to Belgium's country code for Dutch language
} else if (data?.countryCode && isSupportedCountry(data.countryCode)) {
setDefaultCountry(data.countryCode.toLowerCase());
} else {
setDefaultCountry(navigator.language.split("-")[1]?.toLowerCase() || "us");
}
}, [query.data]);
return defaultCountry;
};
This code snippet ensures that when the application's language is set to Dutch, the default country code for the phone input is set to Belgium's (+32). It checks the application's language and sets the default country code accordingly, providing a more accurate default selection for users in Belgium.
This approach assumes that the application's language setting can influence the default selection of the country code in the phone input field. Users can still manually select their country code through the PhoneInput
component, which includes an enableSearch
feature for easier selection.
To continue the conversation, mention @dosu.
Hello, I am new to this project. I tried digging deeper into what was causing the issue. I was able to reproduce the issue successfully. I think the problem has nothing to do with the language the app is set with. I changed the language setting in my browser at : chrome://settings/languages and moved Dutch to the top. I was able to reproduce this issue even when it was set to English.
In order to determine the default country, a useDefaultCountry function is run. This function uses vercel's(The platform the code is deployed on) function to determine where the request is coming from. In case it doesn't figure it out, the language setting from the browser is chosen as default.
What seems to be the problem is that, even when I use a VPN set to Belgium and send a request to the server, vercel thinks that I'm in Netherlands and hence, Netherlands is chosen as the default.
A peek at the networks tab in DevTools seems to confirm the issue.
The response header we receive back contains Amsterdam as the timezone. Hence, it is chosen as default.
I also tried manually over-riding the defaultCountry value to Belgium, that seemed to solve the issue. That is why I'm assuming that vercel isn't able to correctly identify the country from which the request is originating from
If my assumption is wrong, I request someone to point me in the right direction. Thank You! Sorry for the tag @hariombalhara, but kindly help me.
Issue Summary
When the language is set to Nederlands (Dutch), the phone number input displays the country code for the Netherlands (+31), even when the user is in Belgium (+32).
Steps to Reproduce
Actual Results
Expected Results
Technical details
I assume this happens because the language is set to dutch, which is spoken in the Netherlands. However, this is also spoken in Belgium, so assuming the country code is the same as the language set is incorrect behiavor.
Evidence