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!

[dmackerman]

This would be really nice. Is there a current workaround to make this happen? @dimirc: is there a workaround for this that's possible now?

[dmackerman]

Another way to ask this: is there ANY way to add static choices right now?

[ProLoser]

I know this is way late but just saw your videos and I want to point out to people that I really don't advocate using this on mobile. Especially in the way you illustrated.

[ProLoser]

@arkarkark

[FFelling]

+1 for this feature (using the bootstrap theme).

[xSaber]

Hi! It would be great to have such feature! Are there any valid ways to make a static element now?

[piernik]

Any progress?

[diosney]

Bump

[dmackerman]

The only way that I've found to do this is to add a static choice to your data, and then just remove it when you're processing it for saving. Not ideal, but it does work...

[diosney]

@dmackerman Thanks, that is what I'm doing now, but it could be good that pure static or mixed styles can be supported by the module.

[skhome]

Any timeline?

[rgevorkov]

+1 is a useful feature

[jbaudisc]

I would appreciate this feature as well.

[joern]

+1

[korya]

Guys, if instead of adding these useless +1 comments, everyone of you wrote a single line of code, we would have this feature implemented long time ago.

I don't want to sound aggressive, but these comments don't bring any additional value to the discussion, only pollute it and make it harder to follow.

[austinsmorris]

+1 to @korya. Also, +1 in general.

[mrkrstphr]

+1 to @austinsmorris and, by proxy, to @korya.

[Popovkov57]

+1

[gustavolira]

+1

[newpaulinhu]

+1

[gabrielgreen]

+10!

[imjakechapman]

As of right now I found a work around but since I'm still pretty new to angular I'm not sure exactly the performance problems it could bring. But it would be fantastic to be able to have a attribute directive that gets correctly transcluded.

Possibly something like.

 <ui-select uis-transclude-append ng-model="person.selected">
    <ui-select-match placeholder="Select a person...">{{$select.selected.name}}</ui-select-match>

    <div ui-select-static-content class="my-custom-markup">This is positioned absolute via CSS</div>
    <ui-select-choices repeat="person in people |  filter:$select.search">
        {{person.name}}
    </ui-select-choices>
  </ui-select>

I added the uis-transclude-append to the <ui-select> parent element and then position my custom markup via CSS and all seems to work fine as of right now.

 <ui-select uis-transclude-append ng-model="person.selected">
    <ui-select-match placeholder="Select a person...">{{$select.selected.name}}</ui-select-match>

    <div class="my-custom-markup">This is positioned absolute via CSS</div>
    <ui-select-choices repeat="person in people |  filter:$select.search">
        {{person.name}}
    </ui-select-choices>
  </ui-select>

.my-custom-markup {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 75px;
}

.ui-select-choices {
    top: 75px;
}

[willianribeiro]

+1

[eftas-gka]

still interested in this ^^

[jitendersandhu]

+1

[sharonx]

I wanted to show "No results found" in the drop down when the search result is empty in the drop down.

After searching without any solid solution, I came up with this workaround:
In <ui-select-choices>, add ui-disable-choice="item.match==='No results found'"
The full <ui-select> looks like this:

<ui-select ng-model="rule.field.values">
    <ui-select-match placeholder="Enter at least 3 characters to search">{{$item.match}}</ui-select-match>
    <ui-select-choices repeat="item in typeAheadValues"
        ui-disable-choice="item.match==='No results found'"
        refresh="getTypeAheadValues(typeAheadUrl, $select.search)" refresh-delay="500">
        <div ng-bind-html="item.match | highlight: $select.search" ></div>
     </ui-select-choices>
</ui-select>

In the refresh function:

$scope.getTypeAheadValues = function(url, query) {
  if (!query || query==='') {
    $scope.isLoading = false;
    $scope.typeAheadValues = [];
    return; 
  }
  $http.get(url, {params: {query: query}})
    .then(function(res) {
      if (res.data && res.data.length>0) {
        $scope.typeAheadValues = res.data; // [{match: 'something', id: some_id}...]
      } else {
        $scope.typeAheadValues =[ {match: 'No results found'} ];
      }
    }, function(error) {
      $scope.typeAheadValues =[{match: 'No results found'} ];
      console.error(error);
    })
};

[iberodev]

I've been trying to follow this discussion and related threats. It hasn't been easy.
I am getting this has never been implemented and I don't know why this has been related to no results found #831 as it seems a totally different thing. Also the current ui-select already includes a no-choice directive for that purpose:

I am looking also for a way to have a static option among the ui-select-choices BUT these static options must not be filtered out when typing/searching and must be outside the scroll part so that they are always visible (always at the bottom?).

Has anybody achieved this or does anybody know if there is any plan for something similar?

[gercheq]

+1

Thanks for the great work!

It'd be amazing to have a way to render ui-select-choices in an always visible way. With the current design users always need to focus on the list to see full list of elements.

I'd be happy to help for this feature if you can direct me in the right way as well. Thanks!

[FintanK]

+100!

[shyamal890]

+1

[luukBrainstorm]

+1

[KrzysztofKarol]

+1

[Jefiozie]

Please do not "+1" issues, use github 👍 reactions if you really must. Comments should be reserved for constructive discussion/issue resolution. +1s merely add unnecessary noise and scrolling between other, more helpful, replies.

Other ways you can actually help include:

Submitting a pull request that resolves the issue/adds the requested feature
Researching possible implementations or causes of bugs
Providing reproduction plunkrs if one isn't already available

Thanks 😃

[PetrosKalafatidis]

@korya @Jefiozie @arkarkark @trickpattyFH20, can someone give an update on this issue? Is there a way I can help?

[PawelDecowski]

This would be really good to have. My use case is that I have a list of choices but would also want to have a static Add new option at the top.

Any progress on this? I’d be happy to help develop it.

[seujzhang]

I want to add a "XXX" option at the bottom, but it seems that this issue has no progress? How can I implement this now?