Autocomplete items are shown only after a page change

[christo]

Hi,

still evaluating NS UI, now I have this quirk with Autocomplete: when I put it on the first page (at application startup) it does not show SuggestionView, but if I `navigate` to another page and go back, then suggested items are shown (see the attached GIF).

It is a very simple example, I tried removing every secondary stuff, but it always happens.

Any ideas?

Thank you very much,

Christo_

 

[Nick Iliev]

Hi Christo,

I tried to reproduce your case but to no avail. Here you can find the test project where my RadAutoCompleteTextView is loaded on the initial page. Even on initial load, the auto-complete is working as expected. As a possible suggestion compare your code with the one provided and look for differences in the setup that might cause this behavior. Also, make sure that the data used for loading the suggested views is loaded on your initial load. For in the test I am binding to my view-model (where the data for the suggestion views is coming from) using the loaded event
e.g.

<Page loaded="onPageLoaded" xmlns:au="nativescript-telerik-ui-pro/autocomplete">

and in the code behind

import viewModel = require("./main-view-model");

export function onPageLoaded(args){
    var page = args.object;
    page.bindingContext = new viewModel.ViewModel(args);
}

Perhaps you are using different lifecycle event like navigatedTo instead of loaded.

If the above suggestion doesn't resolve your case please send us more detailed information including the type of project you are working with (NativeScript Core or NativeScript with Angular-2) and even better a code snippet or sample project that reproduces this behavior.

Regards,
Nikolay Iliev
Telerik by Progress

[christo]

Hi Nikolay,

happy to see you again.

I saw your example, and in fact it works. The main difference is that the example is single paged: I forgot to mention that this happens to me while using also RadSideDrawer. If I remove the drawer code form the app, the autocomplete works as expected in my app too.

All methods and bindingcontexts are called or instantiated with `loaded` events.

It is Nativescript Core project, `tns --version 2.5.2`, NS UI package is UIforNativeScript1.6.0.063.
Tell me if there are more informations I can give (I have already prepared an archive containing the source code),
and thank you very much,

Christo_

 

[Nick Iliev]

Hi Christo,

Yes, sending us an archive with a sample application that reproduces this scenario will be of great help.
To minimize the archive size you can delete node_modules and platforms folders. You can attach the application here or send us a link for a repository or cloud storage. I will look forward your application and will test it asap.

Regards,
Nikolay Iliev
Telerik by Progress

[christo]

Hi Nikolay,

here's the archive shared online: https://dl.dropboxusercontent.com/u/3971509/DockBooking-test.zip.
(i removed platforms, node_modules and transpiled .js files)

Thank you,
Christo_

[christo]

(forgot to say that in `packge.json` there is a reference to the local NSativeScript UI  package that should be replaced before executing `npm install`)

[Nick Iliev]

Hey Christo,

Thank you for your sample project - I was able to reproduce the described behavior on iOS, and indeed it is a strange scenario. It is not reproducible on Android and can be only reproduced if you combine a drawer page along with auto-complete control. However, I've found a very easy workaround for this iOS specific case which in the same time works also on Android and does not change your UX in any way.
It appears that the reason for this misbehavior is caused by the closeDrawer method which is called on the initial drawer page load. As the initial load is without a opened drawer what is actually happening is that this method is closing the suggestion views instead of the drawer. So the workaround is to explicitly open and close the drawer on drawer load.

e.g
modify basepageLoaded in your BasePage.ts

basepageLoaded(args){
    let page = <Page>args.object;
    page.bindingContext = appViewModel;

    let drawer = <RadSideDrawer>page.getViewById("drawer");
    drawer.showDrawer(); // add this line
    drawer.closeDrawer();
}

After this modification, the suggestion views are now shown on the initial load.

Regards,
Nikolay Iliev
Telerik by Progress

[christo]

Thank you very much Nikolay,

let me say first that your my hero.

Secondly, FYI I had introduced that call `drawer.closeDrawer()` at page load because I had another strange behaviour, that maybe is a bug: sometimes the open drawer three-lines button was not tappable, only after swipe (even a light one) to show the drawer, the button became tappable. That call had solved the first problem.

As you suggested, adding an open before close solves this other issue too, thank you very much.

Christo_