Angular UI Typeahead - Prevent dropdown close on select

Question

I wanted to be able to show the whole list after a selection. The way I wanted to do that is by placing the selection in the placeholder and clearing the input's model.

On the typeahead-on-select event, I save the value that was selected and I set the model to be "". I expected the dropdown to appear just like if the input is empty, but it doesn't.

<input type="text" ng-model="myModel" data-min-length="0"
  typeahead="item for item in items | filter:$viewValue"
  placeholder="{{currentModel}}" 
  ng-blur="validateSelection()" 
  typeahead-on-select="onSelect($item, $model, $label)">

When I clear the input's model, typeahead doesn't detect the change in the model. If I then type 1 character and erase it, I get the whole list.

Angular v1.2.9

Angular Bootstrap v0.10.0

Any help would be appreciated, even a different approach.

EDIT: How do I either prevent the dropdown closing after select or make typeahead detect the change in my model?

Answer 1

I do something similar. I add a button to the right of the typeahead so it looks like a dropdown menu and clicking the button makes the typeahead choices show up. You could do the equivalent of the button click I use to make it happen. You'll have to modify the code below to your needs. This comes from a directive I made

       var which = 'idOfTypehead'; // This is actually a variable, I just set it here
                                   // it is the id="XXX" from my typeahead
       $("#"+which).focus();
       var e = jQuery.Event('keydown', {which: 40 });
            $timeout(function() {
                $("#"+which).trigger(e);
            },0);
        } ;

Answer 2

I could solve this just adding a ng-click function stoping the propagation to the modal content. In this way ng-click="dropdownMenuClick($event)".

<header class="top-header clearfix" data-ng-controller="headerController">

    <!--modal search panel-->
    <li class="dropdown top-bar-item search-panel" ng-show="searchCallback">
        <a href="javascript:;" class="dropdown-toggle" toggle="dropdown">
            <i class="glyphicon glyphicon-search"></i>
            <span>Search modal panel</span>
        </a>
        <div class="dropdown-menu with-arrow panel panel-dark" style="width: 330px;">
            <div class="panel-heading">
                <i class="glyphicon glyphicon-search"></i> <span>{{currentSearchTitle}}</span>
            </div>
            <div ng-click="dropdownMenuClick($event)">
                <div class="panel-body">

                    <div class="row">

                        <input type="text"
                               placeholder="Type your word"
                               ng-model="result"
                               typeahead="item as item.Name for item in buildings($viewValue)"
                               typeahead-on-select='onSelect($item, $model, $label)'
                               class="form-control">

                    </div>

                </div>
            </div>
            <div class="panel-footer text-right">
                <a href="javascript:;" class="" toggle="dropdown" ng-click="searchCallback(seachFilter)">
                    <i class="glyphicon glyphicon-search"></i>
                    <span>Search</span>
                </a>
            </div>
        </div>
    </li>
    <!--modal search panel-->

</header>

In the controller:

(function () {
    'use strict';
    angular.module('app')

    .controller('headerController', [
      '$scope', '$http', '$routeParams', 'logger', '$modal', 'appConfig',
      function ($scope, $http, $routeParams, logger, $modal, appConfig) {

          $scope.dropdownMenuClick = function ($event) {
              $event.preventDefault()
          };

      }
    ]);

}).call(this);