NativeScript Pro UI AutoCompleteTextView Issue

autocomplete-modal.component.html

<StackLayout class="modal-container">
    <StackLayout orientation="horizontal" class="text-container">
        <Label class="title" text="Search for a Country"></Label>
        <Label class="cancel" text="Cancel" (tap)="onCancelTap()"></Label>
    </StackLayout>
    <RadAutoCompleteTextView
        [items]="items" suggestMode="Suggest" displayMode="Plain"
        (suggestionViewBecameVisible)="onSuggestionViewVisible()">
        <SuggestionView tkAutoCompleteSuggestionView>
            <ng-template tkSuggestionItemTemplate let-item="item">
                <StackLayout orientation="vertical" padding="10">
                    <Label class="suggestion" [text]="item.text"></Label>
                </StackLayout>
            </ng-template>
        </SuggestionView>
    </RadAutoCompleteTextView>
</StackLayout>

autocomplete-modal.component.ts

import { Component } from '@angular/core';
import { ModalDialogParams } from 'nativescript-angular/modal-dialog';

import { TokenModel } from 'nativescript-pro-ui/autocomplete';
// import { RadAutoCompleteTextViewComponent } from 'nativescript-pro-ui/autocomplete/angular';
import { ObservableArray } from 'tns-core-modules/data/observable-array';

@Component({
    moduleId: module.id,
    selector: 'autocomplete-modal',
    styleUrls: ['./autocomplete-modal.component.css'],
    templateUrl: './autocomplete-modal.component.html'
})

export class AutoCompleteModalComponent {

    public items: ObservableArray<TokenModel>;

    private countries: string[] = ['Australia', 'Albania', 'Austria', 'Argentina',
        'Maldives', 'Bulgaria', 'Belgium', 'Cyprus', 'Italy', 'Japan',
        'Denmark', 'Finland', 'France', 'Germany', 'Greece', 'Hungary', 'Ireland',
        'Latvia', 'Luxembourg', 'Macedonia', 'Moldova', 'Monaco', 'Netherlands', 'Norway',
        'Poland', 'Romania', 'Russia', 'Sweden', 'Slovenia', 'Slovakia', 'Turkey', 'Ukraine',
        'Vatican City', 'Chad', 'China', 'Chile'];

    constructor(private params: ModalDialogParams) {
        this.initDataItems();
    }

    public onCancelTap(): void {
        this.params.closeCallback();
    }

    public onItemSelected(item: any): void {
        this.params.closeCallback(item);
    }

    public onSuggestionViewVisible(): void {
        console.log('supposed to be visible');
    }

    private initDataItems() {
        this.items = new ObservableArray<TokenModel>();

        for (const item of this.countries) {
            this.items.push(new TokenModel(item, ''));
        }

        console.log(this.items);
    }
}

autocomplete.component.ts

import { Component, ViewContainerRef } from '@angular/core';
import { ModalDialogOptions, ModalDialogService } from 'nativescript-angular/modal-dialog';
import { AutoCompleteModalComponent } from './autocomplete-modal/autocomplete-modal.component';

@Component({
    moduleId: module.id,
    selector: 'autocomplete',
    templateUrl: './autocomplete.component.html'
})

export class AutoCompleteComponent {

    constructor(private vcRef: ViewContainerRef, private modalService: ModalDialogService) { }

    public launchModal(): void {
        const options: ModalDialogOptions = {
            viewContainerRef: this.vcRef,
            context: '',
            fullscreen: true
        };

        this.modalService.showModal(AutoCompleteModalComponent, options)
            .then(console.log)
            .catch(console.log);
    }
}

are you able to fix this issue?

Sorry, I don't remember - this was a long time ago and I no longer work with the company I was writing this code for. Good luck!