From c1aecc810ca2fd813f8da0510f678e90adc3b35e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Wed, 1 Feb 2023 01:58:37 +0100 Subject: [PATCH] Better UX with the language select combobox --- .../workspace-view-language-edit.element.ts | 26 ++++++++++++++----- 1 file changed, 20 insertions(+), 6 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/edit/workspace-view-language-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/edit/workspace-view-language-edit.element.ts index b87993bcd9..98aaae863e 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/edit/workspace-view-language-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/edit/workspace-view-language-edit.element.ts @@ -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 }); } } }