When empty list is returned by query, then "no results" is not handled properly.

[lauri911]

I'm submitting a ...

• bug report
• feature request
• support request

What is the current behavior?

When empty list is returned by query, then "not found" is not handled properly.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem

1. open https://kazanexpress.github.io/vue-simple-suggest/
2. type "adfasdfasdf"
3. you will see a line appearing below input (empty dropdown is show).

What is the expected behavior?

One way to handle it:

Create a special slot "no-results" - then user can handle it (pass "query" to this slot as well)

At moment you have this layout:

1. miscItemAbove

2. suggestItems
   

3. miscItemBelow

...and question is how to hande "no-results" layout.
I prefer this, because header and footer are usually about results, no-result is handled differently:
With results:

1. miscItemAbove

2. suggestItems
   

3. miscItemBelow
   Without results:
4. no-results slot

If "no-results" slot is not defined by user, then hide dropdown completly.
For example, for hidding dropdown use
computed:
hasNoResultsSlot () {
return !!this.$scopedSlots['no-results'];
}

PS. Please use same convention for slot names - camelCase or kebab-case, not mixed.
Its hard to remember, was it miscItem-above or miscItem-Above or miscItem-Above or misc-ItemAbove. (Maybe rename them: results-header and results-footer)

[lauri911]

On second tought, one can handle "no results" in miscItem-above as well.
But if one doesn't want to display anything for empty query, then how to hide dropdown.

[kaskar2008]

@lauri911 We are glad that you are interested in our little project.

As a possible workaround we can provide a prop show-empty that will trigger whether the empty list will be shown or not. (@Raiondesu you should look at this)

And yes, the No-result can be fulfilled with misc-item-above/misc-item-below slots. I will update the example for this showcase.

About slot names - you are right, we have overlooked this terrible mistake. Will be fixed in the next patch.

[Raiondesu]

@kaskar2008, hiding an empty list is not a problem, actually. This can be published as a separate patch.

And yes, @lauri911, miscItems totally can handle the described functional, there's no need for another slot, as it will not reduce final usage's boilerplate code, but will increase boilerplate code in the component itself.

Also, there's currently a prop: remove-list: boolean. Pretty self-descriptive, I think.

Slot names, however, should be out as a separate minor release, unfortunately.

[Raiondesu]

@lauri911, here's how what you described can be achieved now:

<!-- Main slot template -->
<template slot="miscItem-above" slot-scope="{ suggestions, query }">

  <!-- Sub-template if have any suggestions -->
  <template v-if="suggestions.length > 0">
    <div class="misc-item">
      <span>You're searching for '{{ query }}'.</span>
    </div>
    <div class="misc-item">
      <span>{{ suggestions.length }} suggestions are shown...</span>
    </div>
    <hr>
  </template>

  <!-- Show "No result" otherwise -->
  <template v-else>
    <div class="misc-item">
      <span>No results</span>
    </div>
  </template>

</template>

We will update the documentation to include this use-case.

[Raiondesu]

Also, it turns out that a scopedSlot is always a function that always returns an array with at least one element.

So this:

hasNoResultsSlot () {
  return !!this.$scopedSlots['no-results'];
}

will not work.

[lauri911]

Hmm, it works for me very well:
https://jsfiddle.net/eywraw8t/4361/

[Raiondesu]

@lauri911, forgot to mention that it is the case for functional components, which vue-simple-suggestion can become using vue-template-compiler.

So, making a boolean check only works for plain components (which doesn't satisfy me at all).

[Raiondesu]

My bad. Turns out that the slot function behaves differently on a rendering tick. We're close to solution now.