I have a following code which works just fine, but I was wondering is it possible to prevent amp-autocomplete component from closing when clicking outside of it. It adds display:none every time when i try to inspect element in crhome, and it would be good to keep it open while developing, so I can inspect CSS with more ease.
<i role="button" on="tap:autocomplete" class="header__search" tabindex="0"></i>
<amp-lightbox id="autocomplete" layout="nodisplay" class="autocomplete" on="lightboxOpen:autocomplete-query-input.focus">
<form class="sample-form"
method="post"
action-xhr="https://amp.dev/documentation/examples/api/echo"
target="_top">
<amp-autocomplete filter="none" class="autocomplete__component" src="/api/amp/autocomplete" query="query" min-characters="2">
<i class="autocomplete__back" on="tap:quote-lb.close" tabindex="-1" role="button"></i>
<input id="autocomplete-query-input" name="query" class="autocomplete__input">
<template type="amp-mustache" class="autocomplete__result">
<div data-value="{{Label}}" class="autocomplete__result-item">
<a href="/{{Url}}" >
<amp-img layout="fixed" width="27" height="21" src="@GlobalVars.ImageCdnHost{{Image}}?w=27&h=21"></amp-img>
<span>{{Label}}</span>
</a>
</div>
</template>
</amp-autocomplete>
</form>
</amp-lightbox>
What if just find in dev-tools results container, i.e.:
<div class="i-amphtml-autocomplete-results" role="listbox" id="72_AMP_content_" hidden="">
and delete hidden="" ? Of course, not an ideal solution, but you get this in chrome to scratch css.
All the best, V.