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.
Describe the bug
Autocomplete dropdown not appearing in Android (iOS/browser platforms work fine).
To Reproduce
Steps to reproduce the behavior:
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:
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.