Autocomplete dropdown not shown on Android

Framework7 version: 7.0.1
Platform and Target: Cordova Android 10.1.2

Describe the bug

Autocomplete dropdown not appearing in Android (iOS/browser platforms work fine).

To Reproduce

Steps to reproduce the behavior:

Create a template file:

<template>
  <div class="page" data-name="home">
    <!-- Top Navbar -->
    <div class="navbar navbar-large">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="left">
          ...
        </div>
        <div class="title sliding">App title</div>

        <div class="title-large">
          <div class="title-large-text">App title</div>
        </div>

        <div class="right">
          <!-- Link to enable searchbar -->
          <a class="link icon-only searchbar-enable" data-searchbar=".searchbar">
            <i class="icon f7-icons if-not-md">search</i>
            <i class="icon material-icons md-only">search</i>
          </a>
        </div>
        <!-- Searchbar is a direct child of "navbar-inner" -->
        <form class="searchbar searchbar-expandable" id="searchbar-autocomplete">
          <div class="searchbar-inner">
            <div class="searchbar-input-wrap">
              <input type="search" placeholder="Search" id="searchbar-autocomplete-input"/>
              <i class="searchbar-icon"></i>
              <span class="input-clear-button"></span>
            </div>
            <span class="searchbar-disable-button">Cancel</span>
          </div>
        </form>
         ...

Initialise dropdown as per example on framework7 docs:

$on('pageInit', () => {
      autocompleteDropdownSimple = $f7.autocomplete.create({
        inputEl: '#autocomplete-dropdown',
        openIn: 'dropdown',
        source: function (query, render) {
          console.log(query);
          var results = [];
          if (query.length === 0) {
            render(results);
            return;
          }
          // Find matched items
          for (var i = 0; i < fruits.length; i++) {
            if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
          }
          // Render items by passing array with result items
          render(results);
        }
      });

Run on Android device or emulator.

Expected behavior

The dropdown should show suggestions below the search input field.

Actual Behavior

No suggestions are shown below the input field. The only exception is if you leave text in the input box then tap on it to open the dropdown—in this case the dropdown appears correctly.

Additional context

After some time with the debugger this behaviour was traced to autocomplete-class.js. On platform Android only this calls the onHtmlClick(e) function, which registers a click on the "searchbar-enable" href element as a "close-dropdown" event.

The unelegant fix I used to get it working was just to add an extra check in the function:

199     function onHtmlClick(e) {
200       const $targetEl = $(e.target);
201 
202       // adding check to prevent dropdown being closed on android
203       if ($targetEl.hasClass('searchbar-enable') || $target.parents('searchbar-enable')) return;
204 
205       if ($targetEl.is(ac.$inputEl[0]) || ac.$dropdownEl && $targetEl.closest(ac.$dropdownEl[0]).length) return;
206       ac.close();
207     }

But I'm sure there are better ways of doing it. Indeed, I may have set up the page incorrectly in the first place and that is why I saw the behaviour, I'm not enough of an expert to know for sure. But felt I ought to report it in case it helps someone else.

framework7io / framework7