Skip to content

Commit

Permalink
fix: fix JS error on setLanguage call (#2328)
Browse files Browse the repository at this point in the history
When there is a component that uses CLDR and someone calls **setLanguage**,
this causes the webcomponents to re-render and recalculate their state and it turns out that the CLDR for the newly set language is missing and JS error is thrown ("Error: CLDR data for locale de is not loaded").
Currently, this can be seen in our "RTL.html" page, if we add a DatePicker and then use the buttons on the page to change the language. This PR ensures that upon setLanguage, the CLDR is fetched/updated before the re-rendering.
On the other hand, there is **applyDirection** API that also force re-rendering, that if used together with setLanguage, should wait for the setLanguage to complete to allow the message bundles (although they won't fail with JS error) and CLDR to load.
  • Loading branch information
ilhan007 committed Oct 8, 2020
1 parent 72033bc commit f9b9ead
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 7 deletions.
9 changes: 9 additions & 0 deletions packages/base/src/asset-registries/LocaleData.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { fetchJsonOnce } from "../util/FetchHelper.js";
import { attachLanguageChange } from "../locale/languageChange.js";
import getLocale from "../locale/getLocale.js";
import { getFeature } from "../FeaturesRegistry.js";
import { DEFAULT_LOCALE, SUPPORTED_LOCALES } from "../generated/AssetParameters.js";
import { getEffectiveAssetPath } from "../util/EffectiveAssetPath.js";
Expand Down Expand Up @@ -116,6 +118,13 @@ const _registerMappingFunction = mappingFn => {
cldrMappingFn = mappingFn;
};

// When the language changes dynamically (the user calls setLanguage),
// re-fetch the required CDRD data.
attachLanguageChange(() => {
const locale = getLocale();
return fetchCldr(locale.getLanguage(), locale.getRegion(), locale.getScript());
});

export {
fetchCldr,
registerCldr,
Expand Down
24 changes: 17 additions & 7 deletions packages/main/test/pages/RTL.html
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@
<ui5-checkbox text="This checkbox however defines dir=ltr" dir="ltr"></ui5-checkbox>
</section>


<ui5-date-picker></ui5-date-picker>
<script>

// Utility function to change RTL and apply the changes
Expand All @@ -84,6 +84,18 @@
window['sap-ui-webcomponents-bundle'].applyDirection();
}

function setDirByLang(lang) {
if (lang === "he" || lang === "ar") {
setDir("rtl");
} else {
setDir("ltr");
}
}

function setLanguage(lang) {
return window['sap-ui-webcomponents-bundle'].configuration.setLanguage(lang);
}

document.getElementById("sw").addEventListener("click", function(e) {
if (e.target.checked) {
setDir("rtl");
Expand All @@ -94,12 +106,10 @@

document.getElementById("tb").addEventListener("selection-change", function(e) {
var lang = e.detail.selectedButton.textContent.toLowerCase();
if (lang === "he" || lang === "ar") {
setDir("rtl");
} else {
setDir("ltr");
}
window['sap-ui-webcomponents-bundle'].configuration.setLanguage(lang);

setLanguage(lang).then(function() {
setDirByLang(lang);
});
});
</script>

Expand Down

0 comments on commit f9b9ead

Please sign in to comment.