fix(autocomplete): allow autocomplete drop-down width to be adjustable #6247 (#6658)

Author: Lipata

projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts

@@ -674,6 +674,13 @@ describe('IgxAutocomplete', () => {
             expect(dropDownAny.scrollContainer.getBoundingClientRect().width)
                 .toEqual(group.element.nativeElement.getBoundingClientRect().width);
         });
+        it('Should apply width to dropdown list if set', () => {
+            UIInteractions.sendInput(input, 's', fixture);
+            fixture.componentInstance.ddWidth = '600px';
+            fixture.detectChanges();
+            const dropDownAny = dropDown as any;
+            expect(dropDownAny.scrollContainer.getBoundingClientRect().width).toEqual(600);
+        });
         it('Should render aria attributes properly', fakeAsync(() => {
             expect(input.nativeElement.attributes['autocomplete'].value).toEqual('off');
             expect(input.nativeElement.attributes['role'].value).toEqual('combobox');
@@ -845,7 +852,7 @@ describe('IgxAutocomplete', () => {
         <label igxLabel for="towns">Towns</label>
         <igx-suffix igxRipple><igx-icon fontSet="material">clear</igx-icon> </igx-suffix>
     </igx-input-group>
-    <igx-drop-down #townsPanel>
+    <igx-drop-down #townsPanel [width]="ddWidth">
         <igx-drop-down-item *ngFor="let town of towns | startsWith:townSelected" [value]="town">
             {{town}}
         </igx-drop-down-item>
@@ -858,6 +865,7 @@ class AutocompleteComponent {
     @ViewChild(IgxDropDownComponent, { static: true }) public dropDown: IgxDropDownComponent;
     townSelected;
     public towns;
+    public ddWidth = null;
     settings: AutocompleteOverlaySettings = null;
     onItemSelected(args) { }
 

projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts

@@ -277,7 +277,8 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
         if (this.disabled || !this.collapsed) {
             return;
         }
-        this.target.width = this.parentElement.clientWidth + 'px';
+        // if no drop-down width is set, the drop-down will be as wide as the autocomplete input;
+        this.target.width = this.target.width || (this.parentElement.clientWidth + 'px');
         this.target.open(this.settings);
         this.target.onSelection.pipe(takeUntil(this.dropDownOpened$)).subscribe(this.select);
         this.target.onOpened.pipe(first()).subscribe(this.highlightFirstItem);

src/app/autocomplete/autocomplete.sample.html

@@ -25,7 +25,7 @@
                             [igxAutocomplete]='attractionsPanel'/>
                         <label igxLabel>Attraction</label>
                     </igx-input-group>
-                    <igx-drop-down #attractionsPanel maxHeight="300px">
+                    <igx-drop-down #attractionsPanel [width]="attractionsWidth" maxHeight="300px">
                         <igx-drop-down-item *ngFor="let attraction of attractions | contains: travel.value.attraction" [value]="attraction.name">
                             <igx-icon class="logo" fontSet="material">{{attraction.image}}</igx-icon>
                             {{attraction.name}}
@@ -37,6 +37,7 @@
                     <button igxButton (click)="onSearch()" [disabled]="!travel.valid">Search</button>
                 </div>
             </form>
+            <igx-switch (change)="changeDefaultWidth($event)">Attractions Custom Width</igx-switch>
         </article>
     </section>
 </div>

src/app/autocomplete/autocomplete.sample.ts

@@ -3,6 +3,7 @@ import { FormBuilder, FormControl, Validators, FormGroup } from '@angular/forms'
 import { worldInfo, attractions } from './data';
 import { IgxDialogComponent } from 'igniteui-angular';
 
+const ATTRACTIONS_CUSTOM_WIDTH = '300px';
 @Component({
     selector: 'app-autocomplete-sample',
     styleUrls: ['autocomplete.sample.css'],
@@ -13,6 +14,7 @@ export class AutocompleteSampleComponent {
     public travel: FormGroup;
     worldInfo;
     attractions;
+    public attractionsWidth = '';
 
     constructor(fb: FormBuilder) {
         this.worldInfo = worldInfo;
@@ -34,6 +36,10 @@ export class AutocompleteSampleComponent {
         }
         this.alert.open();
     }
+
+    changeDefaultWidth(event: any) {
+        this.attractionsWidth = event.checked ? ATTRACTIONS_CUSTOM_WIDTH : '';
+    }
 }
 
 @Pipe({ name: 'contains' })