AutoCompleteInline doesn't work inside a modal dialog

[tsonevn]

From @RobertGardner on December 22, 2018 1:5

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 5.0.1
• Cross-platform modules: 5.1.1
• iOS Runtime: 5.0.0
• NativeScript-Angular: 6.2.0
• Angular: 6.1.0

Describe the bug
When using RadDataForm and an AutoCompleteInline editor (with NativeScript-Angular on iOS [I haven't tried it on Android yet]), the suggested items don't display if the form is inside a modal dialog.

To Reproduce
Page:

  <GridLayout>
  <StackLayout horizontalAlignment="center">
    <GridLayout rows="auto" columns="* auto *" class="action-bar p-4">
      <Label text="Try This" class="text-center action-bar-title" row="0" col="1"></Label>
      <Button text="Cancel" (tap)="close()" class="text-left action-item" row="0" col="0"></Button>
      <Button text="Done" (tap)="close(true)" class="text-right action-item" row="0" col="2"></Button>
    </GridLayout>
    <GridLayout>
      <RadDataForm [source]="person">
        <TKEntityProperty tkDataFormProperty name="name" displayName="Name" index="0"></TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="birth" displayName="Birth Date" index="1">
          <TKPropertyEditor tkEntityPropertyEditor type="DatePicker"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="city" displayName="City" autoCompleteDisplayMode="plain" [valuesProvider]="cities" index="2">
          <TKPropertyEditor tkEntityPropertyEditor type="AutoCompleteInline"></TKPropertyEditor>
        </TKEntityProperty>
      </RadDataForm>
    </GridLayout>
  </StackLayout>
  </GridLayout>

Display this form using:

  edit(): void {
    let options: ModalDialogOptions = {
      viewContainerRef: this.vcRef,
      context: "",
      fullscreen: false
    };
    this.modalService.showModal(TryDialog, options)
      .then(result => console.log("Result: " + JSON.stringify(result)));
  }

The dialog displays. The date can be edited. However, when editing the city, the auto-complete suggestions don't display.

If you display the exact same form inside a full Page using a normal Angular Component, everything works as expected.

Expected behavior
The suggested items should show.

Copied from original issue: NativeScript/nativescript-angular#1669

[tsonevn]

Hi @RobertGardner,
I was able to recreate the issue on my side and will mark this one as a bug. Also, I am attaching a sample project, which demonstrates the problem. At this time I will suggest keeping track on the issue for further info.
Archive.zip

[adfdev]

Did not solved?

[RobertGardner]

I gave up and used nativescript-filterable-listpicker instead. In addition to actually working, it gives a much nicer user experience. :-)

I have found AutoCompleteInline to be so ugly, buggy, and unusable that I no longer use it in standard pages, either. FilterableListPicker is not a perfect solution, but I can usually figure out how to get it to give a good experience.

[adfdev]

Can select multiple data?

[agallo73]

can someone tell me if we have to dismiss these componets because there's no more support? Is progress stilla mintaining them? The bug makes it impossible to use raddataform within a modal dialog and there are other bugs which could also be fixed.