[v5] Custom Search with autocomplete and dropdown not work on Android device

Questions
1

I am developing an app using F7 v5.7.13. I have page containing:

  • Searchbar with customSearch: true
  • Dropdown with Ajax-Data loading
  • Custom dropdownContainerEl

Looks like everything is implemented according to sample provided in docs (section “Dropdown With Ajax-Data”).

I expect that my request to REST API is executed while I type, and results are rendered in dropdown. It works in desktop Chrome, iOS device and simulator, but do not work on Android device. In latter case, dropdown does not appear.

After some debugging, it seems like an issue inside F7, but I can not say that for sure. Could you help me?

Example (ready to run in Cordova) can be found here.
Steps to reproduce:

  1. Run app on Android device:
    cordova prepare android && cordova run android
  2. Open app and tap search icon
  3. Start typing “er” to trigger API call. “Ervin Howell” and “Glenna Reichert” should be the results. They will be shown on iOS/Chrome, but not on Android device

PS. It is quite problematic to move to v6 now, and I am not sure it will work on v6.

2 
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
    https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
    * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
    * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
    * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
        * Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
3

What do you mean by this? Are you pointing to possible CORS or other security restrictions?

API request is performed without any issues, data is received correctly. No additional security configuration required. This is only rendering problem.

Screenshot of devtools attached to device:

devtools_suggestions
devtools_suggestions1137×883 150 KB

4

@nolimits4web
Could you please take a look? This is quite essential for me.

5

@nolimits4web
Could you please take a look?

7

Found workaround for this: opening autocomplete manually when needed. Namely, when I receive response from web api call, I do the following:

autocomplete.preloaderHide();
render(responseResult);
autocomplete.open();