Proposal: adding static choices

[dimirc]

There are cases where we might need to show some static info at the dropdown. We could add a new directive ui-select-static-choice and I was thinking of something like this:

  <ui-select ng-model="person.selected">
    <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
        <div ng-bind-html="person.name | highlight: $select.search"></div>
    </ui-select-choices>

    <ui-select-static-choice ng-if="!$select.items.length">
        No results for <b>{{$select.search}}</b>
    </ui-select-choices-static>

    <ui-select-static-choice ng-if="$select.items.length<10">
        <button ng-click="fetchFromServer($select.search)">Search more results on server</button>
    </ui-select-choices-static>

  </ui-select>

[dimirc]

@ProLoser what do you think on this?

[arkarkark]

It'd be really nice to specify if the ui-select-static-choice could appear above or below the search box, or tied to the bottom of the popup.

[dimirc]

@arkarkark maybe we could have a something like this:

<ui-select-static-choice anchor='bottom'>
        <button ng-click="openCreateNewWindow()">Create New</button>
</ui-select-choices-static>

[ProLoser]

I don't know why, or exactly how the logic works now, but I sort of imagined something way less complicated:

<ui-select ...>
  ...
  <!-- this doesn't have to be ul+li, could be whatever DOM you wanted -->
  <ul ui-select-choices ...>
    <li ng-click="...">Static 1</li>
    <li ng-click="...">Static 2</li>
    <li ng-click="..." ng-repeat="...">...</li>
    <li ng-click="...">Static 3</li>
  </ul>
</ui-select>

I realize this may not be feasible based on the current design but this is essentially what I think about when I imagine static options mixed with virtual options. I am not a huge fan of creating more directives/attributes/options just for weird edgecases vs just making the level of control when templating much more powerful.

[dimirc]

@ProLoser I agree that more directives isn't something that I like neither. I'm only worried that if we change the functionality of ui-select-choices it will cause a big breaking change (also maybe this is the best time to introduce them).

Other alternative could be to leave the current implementation as a shortcut way (like other shortcuts proposed on #106) and if user needs more flexibility, then they can use this other syntax with a child

declaration.

[arkarkark]

@dimirc I like your anchor="" choice.

I see three options

above_search
below_search
bottom

once position: sticky is more supported, perhaps having those interleaved with the options would be really nice.

https://youtu.be/O91_wFBR9bA

while I'm wishing for a pony, having the static option scroll off when you scroll up (for position below_search or bottom), but then appear right away if you scroll down a bit (like the chrome url bar in android chrome (I think it's called quick return (like in this video: https://youtu.be/Qf8BgjfV3WU))

[ProLoser]

Sorry but that exact level of convolution is what I would prefer to avoid.
But I'm not the maintainer so it's only an opinion and the decision is up
to you. I prefer using the dom structure for position and if you want fancy
floating then add classes and customize the css in a separate file so you
can keep updating the plugin.

[dimirc]

@arkarkark @ProLoser
What do you think of the alternative I wrote on the previous comment:

Other alternative could be to leave the current implementation as a shortcut way (like other shortcuts proposed on #106) and if user needs more flexibility, then they can use this other syntax with a child
declaration.

Basically we can still work the same way we are right now BUT if the user needs more flexibility then just add the repeat on a child element, to make it clear, these will be both valid:

Valid way 1

 <ui-select ng-model="person.selected">
    <ui-select-match placeholder="Select a person...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="person in people |  filter:$select.search">
        {{person.name}}
    </ui-select-choices>
  </ui-select>

Keeping support for this alternative, we have a smaller syntax on simple cases and also avoid introducing a breaking change.

Valid way 2

 <ui-select ng-model="person.selected">
    <ui-select-match placeholder="Select a person...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices>
        <li repeat="person in people | filter:$select.search">{{person.name}}</li>
        <li>Static</li>
    </ui-select-choices>
  </ui-select>

[arkarkark]

I agree with the confusion with the stuff I was asking for.

the valid-way2 doesn't appear to support having something fixed in the window and not scrolling. I guess it'd be upto me to try and hack that up with position: fixed and some margins?

[ProLoser]

@arkarkark

 <ui-select ng-model="person.selected">
    <ui-select-match placeholder="Select a person...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices>
       <li class="top">Sticky top</li>
        <li repeat="person in people | filter:$select.search">{{person.name}}</li>
        <li class="bottom">Sticky bottom</li>
    </ui-select-choices>
  </ui-select>

.ul-select-choices {
  position: relative;
  padding: 30px 0;
}
.top, .bottom {
  position: absolute;
  left: 0;
  right: 0;
}
.top { top: 0; }
.bottom { bottom: 0; }

[arkarkark]

Nice! @ProLoser, thanks so much!

[wkwwong]

Hi, I'm looking forward to this feature too!