yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better UX with the language select combobox

Browse Source
This commit is contained in:
Jesper Møller Jensen
2023-02-01 01:58:37 +01:00
parent 0c478d0665
commit c1aecc810c
1 changed files with 20 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/edit/workspace-view-language-edit.element.ts
View File

@@ -98,14 +98,28 @@ export class UmbWorkspaceViewLanguageEditElement extends UmbLitElement {
#handleLanguageChange(event: Event) {
if (event instanceof UUIComboboxEvent) {
const target = event.composedPath()[0] as UUIComboboxElement;
this.#languageWorkspaceContext?.update({ isoCode: target.value.toString() });
const isoCode = target.value.toString();
// If the language name is not set, we set it to the name of the selected language.
if (!this.language?.name) {
const language = this._availableLanguages.find((language) => language.isoCode === target.value.toString());
if (language) {
this.#languageWorkspaceContext?.update({ name: language.name });
if (isoCode) {
this.#languageWorkspaceContext?.update({ isoCode: target.value.toString() });
// If the language name is not set, we set it to the name of the selected language.
if (!this.language?.name) {
const language = this._availableLanguages.find((language) => language.isoCode === target.value.toString());
if (language) {
this.#languageWorkspaceContext?.update({ name: language.name });
}
}
} else {
// If the isoCode is empty, we reset the value to the original value.
// Provides a way better UX
//TODO: Maybe the combobox should implement something similar?
const resetFunction = () => {
target.value = this.language?.isoCode ?? '';
};
target.addEventListener('close', resetFunction, { once: true });
target.addEventListener('blur', resetFunction, { once: true });
}
}
}