[solved] Autocomplete searchbar - onClick and still has overlay

Questions
1

Hi Vladimir, I’m having an issue and I can reproduce it on the documentation site:
https://framework7.io/docs/autocomplete.html
Type “apple” on the searchbar that’s in the header, above the logo, and then select “pineapple”. Even you have selected the item, the overlay never goes. If I click over the document, the text I’ve enter disappear clearing the input.
That’s the expected behaviour? I need not to destroy the component but be able to still use the screen. Is that posible?

2

I couldnt reproduced it, is it possible to make a video out of it ?

3

Thanks rastek, yes: https://youtu.be/o2bVSSo4tBY

4

It is by design at the moment because it is a customSearch Searchbar, you can call its searchbar.backdropHide() method to hide it when needed (e.g. have search results to show). But now i think it is a bug, and it needs to be disabled when customSearch is enabled in this case

1 Like
5

ah ok! thanks Vladimir :slight_smile:

6

Pushed fix for this, so will be in next release

7

Thanks!! you’re the best!!

8

So overlay means real result is still in background and needs another touch…? I also use custom searchbar in my app and I had fount that weird too but I did no thought its a bug.

Vladimir, whats next release, will the fix be available in v2 too, or v3 only ?

9

PSA for anyone using Vue easiest fix for this is to probably to set backdrop prop to false, ex

  <f7-searchbar
      placeholder="Placeholder"
      :clear-button="true"
      custom-search 
      @searchbar:search="onSearch"
      @searchbar:clear="onClear"
      :backdrop="false"
    >
    </f7-searchbar>
1 Like
10

Was fixed in 2.3.1 release

1 Like