Fix layout of additional languages dropdown in MultiLanguageTextField…

…Component [notarize]
dainst · Mar 26, 2023 · 983bfb7 · 983bfb7
1 parent c004afa
commit 983bfb7
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/desktop/src/app/components/docedit/core/forms/widgets/multi-language-text-field.component.ts b/desktop/src/app/components/docedit/core/forms/widgets/multi-language-text-field.component.ts
@@ -38,6 +38,7 @@ export class MultiLanguageTextFieldComponent implements OnChanges {
     public selectedText: string;
     public shownAdditionalLanguage: Language|undefined;
     public focused: boolean = false;
+    public additionalLanguagesDropdownOpened: boolean = false;
 
 
     public isFilledIn = (languageCode: string) => this.multiLanguageText?.[languageCode] !== undefined;
@@ -77,6 +78,16 @@ export class MultiLanguageTextFieldComponent implements OnChanges {
     }
 
 
+    public onAdditionalLanguagesDropdownMenuToggled(opened: boolean) {
+
+        this.additionalLanguagesDropdownOpened = opened;
+
+        if (this.additionalLanguagesDropdownOpened && this.shownAdditionalLanguage) {
+            this.selectLanguage(this.shownAdditionalLanguage);
+        }
+    }
+
+
     public selectLanguage(language: Language) {
 
         if (this.additionalLanguages.includes(language)) this.shownAdditionalLanguage = language;

diff --git a/desktop/src/app/components/docedit/core/forms/widgets/multi-language-text-field.html b/desktop/src/app/components/docedit/core/forms/widgets/multi-language-text-field.html
@@ -9,20 +9,22 @@
             (focus)="focused = true">{{language.label}}</a>
         </li>
         <li *ngIf="additionalLanguages?.length > 0" class="nav-item additional-languages-dropdown"
-            ngbDropdown placement="bottom-right" role="group">
-        <a class="nav-link" [class.active]="shownAdditionalLanguage.code === selectedLanguage"
-            [class.filled-in]="isFilledIn(shownAdditionalLanguage.code)" ngbDropdownToggle>
-                {{shownAdditionalLanguage.label}}
-        </a>
-        <div class="additional-languages-dropdown-menu dropdown-menu" ngbDropdownMenu>
+            ngbDropdown placement="bottom-right" role="group"
+            (openChange)="onAdditionalLanguagesDropdownMenuToggled($event)">
+            <a class="nav-link"
+               [class.active]="shownAdditionalLanguage.code === selectedLanguage || additionalLanguagesDropdownOpened"
+               [class.filled-in]="isFilledIn(shownAdditionalLanguage.code)" ngbDropdownToggle>
+                    {{shownAdditionalLanguage.label}}
+            </a>
+            <div class="additional-languages-dropdown-menu dropdown-menu" ngbDropdownMenu>
                 <div class="additional-languages-dropdown-list">
                     <button *ngFor="let language of additionalLanguages"
                             class="dropdown-item"
                             (click)="selectLanguage(language)">
                             {{language.label}}
                     </button>
                 </div>
-        </div>
+            </div>
         </li>
     </ul>
     <input *ngIf="!multiLine" #inputField [(ngModel)]="selectedText"