NativeScript-Drop-Down is not working in RadListView with iOS

[Oliver Ochs]

Please, provide the details below:

Did you verify this is a real problem by searching Stack Overflow?

Yes

Tell us about the problem

NativeScript-Drop-Down is not working in RadListView in iOS. The keyboard ist now shown. It works in a ListView. It also works on Anrdoid.

Which platform(s) does your issue occur on?

iOS

Please provide the following version numbers that your issue occurs with:

• Progress NativeScript UI version: "nativescript-telerik-ui": "3.0.4"
• CLI: 3.1.2
• Cross-platform modules: ^3.1.0
• Runtime(s):

    "tns-android": {
      "version": "3.1.1"
    },
    "tns-ios": {
      "version": "3.1.0"
    }

Please tell us how to recreate the issue in as much detail as possible.

I am using NativeScript-Drop-Down to display a picker in iOS and Android.

• This works fine in a ListView. It does not work in a RadListView.
• In a RadListView it works on Android.
  
• In a RadListView it does not work in iOS
  

There is also an (open) issue in NativeScript-Drop-Down: PeterStaev/NativeScript-Drop-Down#120

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

I created an example project to reproduce this issue: https://github.com/simonox/NativeScript-Drop-Down

Here is just a snippet to illustrate this issue.

<ActionBar title="NG Demo"></ActionBar>
<GridLayout rows="*" width="100%" height="100%">
    <!-- change RadListView to ListView and the keyboard also works in iOS -->
    <RadListView row="1" [items]="cartItems"
                 pullToRefresh="false"
                 selectionBehavior="Press"
                 #cartView>
        <ng-template let-item="item">
            <StackLayout orientation="vertical" class="medium-spacing tile">
                <Label [text]="item.label"></Label>
                <DropDown #dd
                          [class]="cssClass"
                          [items]="selectableItems"
                          [(ngModel)]="item.value"
                          [hint]="hint"
                          (selectedIndexChanged)="onchange($event)"
                          (opened)="onopen()"
                          (closed)="onclose()"
                          row="0"
                          colSpan="2"></DropDown>
                <Label text="Selected Index:"
                       row="1"
                       col="0"
                       fontSize="18"
                       verticalAlignment="bottom"></Label>
                <TextField [text]="item.value"
                           row="1"
                           col="1"></TextField>
            </StackLayout>
        </ng-template>
    </RadListView>

    <!--
        ListView is working
    -->
    <!--
     <ListView row="1" [items]="cartItems"
                 pullToRefresh="false"
                 selectionBehavior="Press"
                 #cartView>
        <ng-template let-item="item" >
            <StackLayout orientation="vertical" class="medium-spacing tile">
                <Label [text]="item.label"></Label>
                <DropDown #dd
                          [class]="cssClass"
                          [items]="selectableItems"
                          [(ngModel)]="item.value"
                          [hint]="hint"
                          (selectedIndexChanged)="onchange($event)"
                          (opened)="onopen()"
                          (closed)="onclose()"
                          row="0"
                          colSpan="2"></DropDown>
                <Label text="Selected Index:"
                       row="1"
                       col="0"
                       fontSize="18"
                       verticalAlignment="bottom"></Label>
                <TextField [text]="item.value"
                           row="1"
                           col="1"></TextField>
            </StackLayout>
        </ng-template>
    </ListView>
    -->
</GridLayout>

[Deyan Ginev]

@simonox - thanks for submitting this. We have managed to reproduce the issue and will investigate. We hope that we will be able to provide a fix in the next couple of days via nativescript-telerik-ui-pro@next version of the plugin from npmjs.com. The fix will officially make it in the next official version of the plugin due to at the end of August.

[Deyan Ginev]

@simonox - this issue has now been resolved in our internal codebase and will make it soon into our nativescript-telerik-ui(-pro)@next version of the plugin. It will also be part of the next official release due to the end of August.