Search bar autocomplete prevents clicking on elements beneath it

Need help App Organization
1

Hi Bubblers,

I am facing an issue here. I have created a navigation bar a-la-product hunt, with search autocomplete included in the search box. The navigation bar is floating group and I created it as a repeatable elements. For my autocomplete, I use the the autocomplete pluggin which sends results to a repeated group right under the search box:

36%20AM
36%20AM2356Ă—444 52.4 KB

It works like a charm. Now to the issue. When I add my navigation bar to a page, and I put an element under the navigation bar, like here:

32%20AM
32%20AM2356Ă—512 83.9 KB

It is impossible to click on the “ADD Review” button as you can imagine that navigation bar area is preventing it.

So, I am doing something wrong for sure. I thought about putting the autocomplete module in the page and not in the reusable element but it is going to be a nightmare to manage.

What would you suggest?

Thanks everyone

2

What does it look like in Preview?

Also make sure the element you want on top is sent to the front. Right click on the element to see option “bring to front” I believe.

3

The preview display is fine, it is just impossible to click on the first cell of my review list even when the review list is place in front:

00%20PM
00%20PM2868Ă—718 249 KB

It may be because the floating group is positioned above everything.

4

Is there something else in the way maybe? It’s really hard to tell without you sharing the editor so we can have a better look at everything and see what you are talking about. Maybe post a short video and tell us what you are expecting to happen. It’s hard to fully understand what you are trying to accomplish. Or it is at least for me. :slight_smile: Unless someone else can figure out what you are trying to do and can chime in. Hope we can help. :smile:

5

Thanks @J805 I found the problem. I was not using a focus group. If you see my autocomplete on my first screenshot, I put it in a group so I had to expand the zone of my navigation bar up to the bottom of the group which created a huge empty stripe on top of each page. I switched to a focus group, resized the navigation bar to 65px and added the focus group. Works like a charm now as focus group are displayed on top of their attached element.

6

Cool :slight_smile: Glad you figured it out! Good job, keep up the good work!

1 Like
7

Just as a follow up to this. I added this to the page header:

<script>
$( document ).ready(function() {

const inputs = document.querySelectorAll('input');

inputs.forEach(input => {
input.setAttribute("type","text")
input.setAttribute('autocomplete', 'off')
input.setAttribute('autocorrect', 'off')
input.setAttribute('autocapitalize', 'on')
input.setAttribute('spellcheck', false)

});  
});
</script>
3 Likes
8

David67, what does this code do?

9

It prevents the browser from showing an autocomplete dropdown

1 Like