fix: dropdown options of select fields use the full available width (#2508)

fixes #2494

Author: Abhinegi2

src/app/core/basic-datatypes/configurable-enum/enum-dropdown/enum-dropdown.component.html

@@ -1,31 +1,35 @@
 <mat-form-field>
   <mat-label>{{ label }}</mat-label>
-  <app-basic-autocomplete
-    #autocomplete
-    [formControl]="form"
-    [multi]="multi"
-    [options]="options"
-    [optionToString]="enumValueToString"
-    [createOption]="createNewOption"
-  ></app-basic-autocomplete>
+  <div class="autocomplete-container">
+    <app-basic-autocomplete
+      #autocomplete
+      [formControl]="form"
+      [multi]="multi"
+      [options]="options"
+      [optionToString]="enumValueToString"
+      [createOption]="createNewOption"
+    ></app-basic-autocomplete>
 
-  <fa-icon
-    *ngIf="form.enabled"
-    icon="caret-down"
-    class="form-field-icon-suffix"
-    (click)="autocomplete.showAutocomplete()"
-    matIconSuffix
-  ></fa-icon>
+    <div class="icon-container">
+      <fa-icon
+        *ngIf="form.enabled"
+        icon="caret-down"
+        class="form-field-icon-suffix"
+        (click)="autocomplete.showAutocomplete()"
+        matIconSuffix
+      ></fa-icon>
 
-  <fa-icon
-    *ngIf="form.enabled && !!createNewOption && canEdit"
-    class="form-field-icon-suffix"
-    matIconSuffix
-    (click)="openSettings($event)"
-    icon="wrench"
-  ></fa-icon>
+      <fa-icon
+        *ngIf="form.enabled && !!createNewOption && canEdit"
+        class="form-field-icon-suffix"
+        matIconSuffix
+        (click)="openSettings($event)"
+        icon="wrench"
+      ></fa-icon>
+    </div>
 
-  <mat-error *ngIf="form.errors">
-    <app-error-hint [form]="form"></app-error-hint>
-  </mat-error>
+    <mat-error *ngIf="form.errors">
+      <app-error-hint [form]="form"></app-error-hint>
+    </mat-error>
+  </div>
 </mat-form-field>

src/app/core/basic-datatypes/configurable-enum/enum-dropdown/enum-dropdown.component.ts

@@ -20,7 +20,10 @@ import { OkButton } from "../../../common-components/confirmation-dialog/confirm
 @Component({
   selector: "app-enum-dropdown",
   templateUrl: "./enum-dropdown.component.html",
-  styleUrls: ["./enum-dropdown.component.scss"],
+  styleUrls: [
+    "./enum-dropdown.component.scss",
+    "../../../common-components/basic-autocomplete/basic-autocomplete-dropdown.component.scss",
+  ],
   standalone: true,
   imports: [
     MatSelectModule,

src/app/core/basic-datatypes/discrete/discrete-import-config/discrete-import-config.component.html

@@ -1,5 +1,5 @@
 <mat-dialog-content>
-  <table>
+  <table class="mapping-table">
     <tr>
       <th i18n="Import mapping header">Imported values</th>
       <th i18n="Import mapping header">Assigned values</th>

src/app/core/basic-datatypes/discrete/discrete-import-config/discrete-import-config.component.scss

@@ -0,0 +1,13 @@
+.mapping-table {
+  width: 100%;
+  max-width: 800px;
+}
+
+.mapping-table th {
+  text-align: left;
+}
+
+:host ::ng-deep mat-form-field {
+  width: 100%;
+  max-width: 400px;
+}

src/app/core/common-components/basic-autocomplete/basic-autocomplete-dropdown.component.scss

@@ -0,0 +1,9 @@
+.autocomplete-container {
+  position: relative;
+}
+
+.icon-container {
+  position: absolute;
+  top: 0;
+  right: 0;
+}

src/app/core/common-components/basic-autocomplete/basic-autocomplete.component.html

@@ -4,7 +4,7 @@
   [hidden]="focused || display === 'none'"
   [disabled]="_disabled"
   matInput
-  style="text-overflow: ellipsis"
+  style="text-overflow: ellipsis; width: calc(100% - 50px)"
   (focusin)="showAutocomplete()"
   (focusout)="showAutocomplete()"
   [value]="displayText"

src/app/core/common-components/entity-select/entity-select.component.html

@@ -1,44 +1,45 @@
 <mat-form-field>
   <mat-label>{{ label }}</mat-label>
+  <div class="autocomplete-container">
+    <app-basic-autocomplete
+      #autocomplete
+      [formControl]="form"
+      [valueMapper]="entityToId"
+      [optionToString]="accessor"
+      (autocompleteFilterChange)="recalculateMatchingInactive($event)"
+      [multi]="multi"
+      [display]="showEntities ? 'chips' : 'none'"
+      [options]="availableOptions | async"
+      [placeholder]="(loading | async) ? loadingPlaceholder : placeholder"
+      [createOption]="createNewEntity"
+    >
+      <ng-template let-item>
+        <app-entity-block
+          style="margin: auto"
+          [entityToDisplay]="item"
+          [linkDisabled]="form.enabled"
+        ></app-entity-block>
+      </ng-template>
 
-  <app-basic-autocomplete
-    #autocomplete
-    [formControl]="form"
-    [valueMapper]="entityToId"
-    [optionToString]="accessor"
-    (autocompleteFilterChange)="recalculateMatchingInactive($event)"
-    [multi]="multi"
-    [display]="showEntities ? 'chips' : 'none'"
-    [options]="availableOptions | async"
-    [placeholder]="(loading | async) ? loadingPlaceholder : placeholder"
-    [createOption]="createNewEntity"
-  >
-    <ng-template let-item>
-      <app-entity-block
-        style="margin: auto"
-        [entityToDisplay]="item"
-        [linkDisabled]="form.enabled"
-      ></app-entity-block>
-    </ng-template>
-
-    <ng-container autocompleteFooter *ngIf="currentlyMatchingInactive > 0">
-      <mat-slide-toggle
-        [checked]="includeInactive"
-        (toggleChange)="toggleIncludeInactive()"
-        i18n="Label for checkbox|e.g. include inactive children"
-        >Also show {{ currentlyMatchingInactive }} inactive
-      </mat-slide-toggle>
-    </ng-container>
-  </app-basic-autocomplete>
-
-  <fa-icon
-    *ngIf="form.enabled"
-    icon="caret-down"
-    class="form-field-icon-suffix"
-    (click)="autocomplete.showAutocomplete()"
-    matIconSuffix
-  ></fa-icon>
-
+      <ng-container autocompleteFooter *ngIf="currentlyMatchingInactive > 0">
+        <mat-slide-toggle
+          [checked]="includeInactive"
+          (toggleChange)="toggleIncludeInactive()"
+          i18n="Label for checkbox|e.g. include inactive children"
+          >Also show {{ currentlyMatchingInactive }} inactive
+        </mat-slide-toggle>
+      </ng-container>
+    </app-basic-autocomplete>
+    <div class="icon-container">
+      <fa-icon
+        *ngIf="form.enabled"
+        icon="caret-down"
+        class="form-field-icon-suffix"
+        (click)="autocomplete.showAutocomplete()"
+        matIconSuffix
+      ></fa-icon>
+    </div>
+  </div>
   <mat-error *ngIf="form.errors">
     <app-error-hint [form]="form"></app-error-hint>
   </mat-error>

src/app/core/common-components/entity-select/entity-select.component.ts

@@ -24,7 +24,10 @@ import { EntityRegistry } from "../../entity/database-entity.decorator";
 @Component({
   selector: "app-entity-select",
   templateUrl: "./entity-select.component.html",
-  styleUrls: ["./entity-select.component.scss"],
+  styleUrls: [
+    "./entity-select.component.scss",
+    "../../common-components/basic-autocomplete/basic-autocomplete-dropdown.component.scss",
+  ],
   imports: [
     MatFormFieldModule,
     NgIf,

src/app/core/import/import-column-mapping/import-column-mapping.component.spec.ts

@@ -39,14 +39,17 @@ describe("ImportColumnMappingComponent", () => {
     genderColumn.propertyName = "category";
     await component.openMappingComponent(genderColumn);
 
-    expect(openSpy).toHaveBeenCalledWith(DiscreteImportConfigComponent, {
-      data: {
-        col: genderColumn,
-        values: ["male", "female"],
-        entityType: TestEntity,
-      },
-      disableClose: true,
-    });
+    expect(openSpy).toHaveBeenCalledWith(
+      DiscreteImportConfigComponent,
+      jasmine.objectContaining({
+        data: {
+          col: genderColumn,
+          values: ["male", "female"],
+          entityType: TestEntity,
+        },
+        disableClose: true,
+      }),
+    );
   });
 
   it("should emit changes after popup is closed", async () => {

src/app/core/import/import-column-mapping/import-column-mapping.component.ts

@@ -110,6 +110,7 @@ export class ImportColumnMappingComponent implements OnChanges {
           values: [...uniqueValues],
           entityType: this.entityCtor,
         },
+        width: "80vw",
         disableClose: true,
       })
       .afterClosed()