Widget language not updating after applying `intl.setLocale("es-MX");`

[bradMaps]

I am developing a React app using the following:

- ArcGIS JS Maps SDK

- Calcite

- Survey123 web app API

When a user changes the language (default en-US to es-MX) in the embedded survey, I need to change the language of the map's widgets, as well.

I created a simple codepen that should change the map/widget's language on button click, but I'm not seeing the language in the search widget, for example, update.  Any ideas?

intl.setLocale("es-MX")

https://codepen.io/bsnide/pen/gbYoxwE

Thanks!

[nafizpervez]

ArcGIS JavaScript API needs the locale data to be properly loaded. The intl.setLocale() method only works if the appropriate locale data is loaded. You need to ensure that the locale is supported and properly initialized in your app. You can set the locale when initializing the map as well.

Here's an example of how to make sure the language settings are applied correctly:

require([
  "esri/Map",
  "esri/views/MapView",
  "esri/widgets/Search",
  "esri/intl",
], function (Map, MapView, Search, intl) {
  // Set the initial locale
  intl.setLocale("es-MX"); // Set default to Spanish

  const map = new Map({
    basemap: "streets-navigation-vector"
  });

  const view = new MapView({
    container: "viewDiv",
    map: map
  });

  const searchWidget = new Search({
    view: view
  });

  view.ui.add(searchWidget, "top-right");

  // Language toggle function
  document.getElementById("langDiv").addEventListener("click", function() {
    const currentLocale = intl.getLocale();
    console.log("prev locale", currentLocale);
    // Toggle between 'en-US' and 'es-MX'
    const newLocale = currentLocale === "en-US" ? "es-MX" : "en-US";
    intl.setLocale(newLocale);
    console.log("current locale", intl.getLocale());
  });
});