Slot outside the autosuggest_results div

First of all, thanks for your amazing work, the component works like a charm. I’m using the 2.0.4 version and I’m trying to render a link to see more results when the amount of them exceeds the limit that I’ve configured. For this purpose, I’ve used the after-suggestions slot, and it works properly.

The problem comes when I set a max-height for the results container:

.autosuggest__results {
  max-height: 500px
  overflow: scroll;
}

The after-suggestions slot is rendered after the <ul> but inside the <div class="autosuggest__results"> so is not possible to make it visible (without scrolling) when the results exceed the max-height configured. I’ve tried to add the max-height and overflow properties to the <ul> directly, but this breaks the keyboard navigation. I would like to be able to have a See more link always visible (when there are more available results) without scrolling the list.

Here you could see an example in codebox.

So, the question is: Is there a way to position a slot just after the autosuggest_results container? If not, it would be possible to move the existing after-suggestions slot outside it? Do you think that it makes sense?

Thanks in advance!

[darrenjennings]

@vlledo I added the slot you suggested, but I don’t know if it makes sense to hide/show it based on the results for all users, if you think about potentially users want some html inside the component div structure itself… but if you wanted, you can capture the value yourself and v-if on the slot using shouldRenderSuggestions like so: https://codesandbox.io/s/vueautosuggest-issue-162-bz1qw

I also updated the codesandbox to use the ensureItemVisible from the component so you don’t have to write it yourself. Thanks for the feedback!

[vlledo]

Ok, that’s perfect! Thanks a lot for your support 🙂