Autocomplete Popover Issue

[guidoec]

Hi, I am experiencing a wired issue while trying to display mi array response for the autocomplete component. It seems like the popover loses the anchor of the input and gets positioned ‘0px’. Also does not have the proper width in relation with the input.

I’m using it inside a modal, don’t think that this is the issue because I try it outside of it and the problem persisted.

Here is a screen cap of what I am talking about.

The code:

            <q-autocomplete v-model="terms" @search="search" @selected="selected" :delay="500">
              <div class="floating-label">
                <input v-model="terms" required class="full-width" />
                <label>Search for participants</label>
              </div>
            </q-autocomplete>

Thanks!!

[guidoec]

Anyone???

[rstoenescu]

Hi. Will investigate. Give me 2-3 days pls. I’m overloaded!

[guidoec]

@rstoenescu sure no problem! I was wondering if someone encountered this error but it seems that no. I will investigate too. If I come up with something I let you know.

[guidoec]

@rstoenescu I tried to look for what was causing the issue, but I cannot manage to edit the main Autocomplete.vue componente to override it. It’s there a way to do it? Or I should copy the autocomplete component and popover componente and import them externally and use them instead the ones Quasar it’s importing?

[rstoenescu]

If you found the issue please submit a PR. It would be way better. Fork, clone the fork, make changes, submit. But since I am working on forms revamp, it would be better if we discussed a fix, since code in that area changed.

[guidoec]

Okey. I will do that. Now I didn’t found what it’s cussing it yet. But there are props delcleared in the auto complete component over the popover that do not belong to the popover component itself. I will fork and clone the repo and try it out.

[guidoec]

@rstoenescu I found the issue. The problem was that I was giving the “.list” class a height of 100vh. Because of this, don’t know really why, de popover loses it’s anchor.
This also happens in your popover example with the “assignment” button.

In your example the the list displays a 20 elements and with a max-height of 500px. If you shorten the list to, for example, 2 elements the popover won’t lose the anchor. Also if you change the max-height to something like 200px you can preserve the amount of elements in the list without loosing the anchor for the popover.

Conclusion, big heights breaks the anchor position for the popover. Temporary fix? I think that setting the max-amount displayed to 3 or 4 elements in the autocomplete or giving a max-height of 200/300px to the list container inside the popover in the autocomplete component could solve it.

[rstoenescu]

Care for this quick PR? Need some help as I’m overloaded with work.

[guidoec]

Sure no problem. I will make a PR to give all popovers a standard height so there is no conflict with any popover triggered. As soon I can I will make the request.

[rstoenescu]

Hmm, not for all popovers. Rather for autocomplete only… but for the autocomplete you got the max results to be shown option… let me ponder on this better. Also, the datetime input component uses popovers; one with date and time together can be quite large in height.

[guidoec]

Hmmm I checked the date time component and the popover also has this issue. Losses anchor and gets positioned to top and not to the triggering element. I solved nesting the <slot> in the popover component with a div of max-height 50vh (it seems that it is not possible to bind styles to slots yet in vue). I will PR now so you can check it out. I think it’s a quick easy fix.

[guidoec]

This post is deleted!

[s.molinari]

@guidoec - is this relevant? https://forum-archive.vuejs.org/topic/1316/how-can-i-properly-bind-a-class-to-the-slot/3

Also, please link the PR here if you could. I am, and I am sure others finding this thread would be, interested your the solution.

Scott

[guidoec]

@s-molinari that is what I actually did, I have already seen that thread. But thanks for helping

You cannot modify the slot, you have to wrap it with another element, a div for example.

Now I am actually traveling. So as soon as I get good internet I’ll push my changes to the fork and ask for a PR. I will link it here.

Thanks again!

[guidoec]

Pull Request done: https://github.com/quasarframework/quasar/pull/413

[s.molinari]

Great! Thanks for the contribution!

Scott