[Feature Request] Append and prepend slots in Autocomplete

[retnikt]

trafficstars

Problem to solve

I would like to be able to add a fixed element at the top (prepend) or bottom (append) of the v-autocomplete popup. By "fixed" I mean that it would stay visible in the same place when the list is scrolled. This could be used to, for example, provide a "create" button so the user can add an item to the list, or a "settings" button for the items. A sort-of example of this (although it is a bit different to how v-autocomplete works) can be seen in Gmail:

Proposed solution

Add two slots, append and prepend to v-autocomplete to fulfill this purpose.

_{By the way this issue creation form is stupid, it is pointless, far too small, doesn't provide any of the nice editing features that the GitHub one does (e.g. copy and paste images, simple markdown preview, mention autocompletion, etc), and seems very intrusive to me. Why not just use GitHub's issue templates? Also it doesn't work at all if the user is already logged in to GitHub and instead just redirects you to the email settings page of your account, at least in Firefox. (yes I know this is a separate issue).}

[MajesticPotatoe]

these already exist append-item and prepend-item slots however they are not fixed.

[retnikt]

Thanks, these work alright as a workaround but do not completely solve the problem.

[Chellhooo]

Does anyone has solutions to solve the problem~ ?

[RafaelSantana97]

append-item and prepend-item slots are good, but I still need a fixed slot outside of the list, so that, it won't lose width for the scroll bar. Does anyone solve this problem?

In the meanwhile, I'm using this as a workaround:

<div slot="append-item" class="bottom-sticked">
  <v-divider />
  <div class="buttons">
    <button class="filter-item-btn done">Done</button>
    <button class="filter-item-btn cancel">Cancel</button>
  </div>
</div>

.bottom-sticked {
  position: sticky;
  bottom: 0;
  background: white;
  padding-bottom: 6px;
  margin-bottom: -8px;

  .buttons {
    padding: 0 12px;

    .filter-item-btn {
      padding: 6px 6px 0;
    }
  }
}

[panypticon]

We also have a keen interest in having append/prepend slots for VAutocomplete that are rendered outside the menu's VList (simply to be in full control of styling for complex components). Is there any progress on this? If not, would you accept a PR with these changes?