L3 Workshop: Menu option is not visible properly

This is a known issue with the dynamic auto-complete feature in the AWS Blu Age L3 workshop. The drop-down menu options are not displaying correctly because of styling issues in the Angular component.

There are several ways to fix this:

1. Modify the component styling in the dynamic-autocomplete.component.ts file by adding:

• panelWidth="auto" to the mat-autocomplete tag
• [ngStyle]="{'width': 'auto', 'min-width': '100%', 'max-width': 'none'}" to the mat-option tag
• Add CSS styles to ensure proper display:

::ng-deep .mat-autocomplete-panel {
min-width: 100% !important;
max-width: none !important;
width: auto !important;
}
::ng-deep .mat-option {
white-space: nowrap;
overflow: visible;
}

2. A simpler alternative is to just increase the size parameter in the dynamic-autocomplete tag. You can change the size from the current value to 25:

<dynamic-autocomplete [options]='getMenuOptions()' [id]='"option"' [size]=25 [line]=20 [column]=41 [(ngModel)]='option'></dynamic-autocomplete>

Either of these approaches should resolve the issue and make the dropdown menu options visible.
Sources
AWS Blu Age L3 workshop - User experience : Improvement - Dynamic auto complete issue | AWS re:Post