typeahead adaptive position

projects/ngds-forms/src/lib/components/input-types/typeahead-input/typeahead-input.component.html

@@ -27,7 +27,7 @@
       <input #typeaheadInput autocomplete="off" [hidden]="!isOpen.value" [(ngModel)]="currentDisplay" [placeholder]="placeholder ? placeholder : ''"
         (ngModelChange)="matchControlToInput()" [typeahead]="selectionListItems" (typeaheadOnSelect)="selected()"
         typeaheadOptionField="display" [optionsListTemplate]="getTemplate()" [typeaheadMinLength]="typeaheadMinLength"
-        [adaptivePosition]="true" [disabled]="isDisabled" class="w-100 h-100 rounded border-0 multiselect-input"
+        [adaptivePosition]="adaptivePosition" [disabled]="isDisabled" class="w-100 h-100 rounded border-0 multiselect-input"
         [ngClass]="{'is-invalid': isInvalid, 'shrink-input': !isOpen.value}" (focus)="onFocus()" (blur)="onBlur()" [attr.id]="control?.id">
         <!-- Placeholder -->
         <div class="text-muted text-start" *ngIf="multiselect && placeholder && !control.value && !isFocused">

projects/ngds-forms/src/lib/components/input-types/typeahead-input/typeahead-input.component.ts

@@ -10,6 +10,8 @@ import { BehaviorSubject } from 'rxjs';
 export class NgdsTypeaheadInput extends NgdsInput implements AfterViewInit {
   // The minimum length that must be typed before suggestion dropdown appears. If 0, dropdown opens on select.
   @Input() typeaheadMinLength: number = 0;
+  // The typeahead options will drop up or drop down unless this is set to false.
+  @Input() adaptivePosition: boolean = true;
 
   @ViewChild('defaultListTemplate') defaultListTemplate: TemplateRef<any>;
   @ViewChild('typeaheadInput') typeaheadInput: ElementRef;

src/app/forms/typeaheads/typeaheads.component.html

@@ -4,6 +4,9 @@ <h3>Basic Typeahead</h3>
   <p>
     Provide the list of selection options as an array in <code>[selectionListItems]</code>, same as the picklist input. NGDS Forms Typeahead extends the functionality of the typeahead provided in <a href="https://valor-software.com/ngx-bootstrap/#/components/typeahead" target="_blank" rel="noopener">ngx-bootstrap</a>.
   </p>
+  <p>
+    Use <code>[adaptivePosition]="false"</code> to force the suggestions to dropdown.
+  </p>
   <p>
     In the example below, search for a Canadian province or territory.
   </p>
@@ -21,7 +24,7 @@ <h3>Set typeahead value programmatically</h3>
   <demonstrator [htmlFile]="snippets?.programmaticTypeahead?.html" [tsFile]="snippets?.programmaticTypeahead?.ts"
     [control]="form?.controls?.['programmaticTypeahead']">
     <button class="btn btn-primary mb-2" (click)="programmaticSet()">Set value</button>
-    <ngds-typeahead-input [control]="form?.controls?.['programmaticTypeahead']" [selectionListItems]="displayProvinceList">
+    <ngds-typeahead-input [control]="form?.controls?.['programmaticTypeahead']" [selectionListItems]="displayProvinceList" [adaptivePosition]="false">
     </ngds-typeahead-input>
   </demonstrator>
 </section>