Angular ng-keyup not working for uib-dropdown-menu

390 views Asked by At

I have a drop down where the item size is large so I am looking for a way to enable keyboard-input (key press) so that I can type and it automatically moves to that option in the drop down. Any suggestions?

Tried this, but not showing any difference :

 <div class="btn-group" uib-dropdown dropdown-append-to-body ng-keyup="onKeyUp($event)">
      <button id="btn-append-to-body" type="button" class="btn btn-primary" uib-dropdown-toggle>
        Dropdown on Body <span class="caret"></span>
      </button>
    <ul uib-dropdown-menu role="menu" style="max-height: 150px; overflow-y: auto; max-width : 10px" >
      <li ng-repeat="value in feature.values | filter: tappedKeys | unknownValueFilter | featureValueOrder ">
        <a ng-click="currentValue.set(value)" href="">
          {{value | featureValueFormatter }}
        </a>
      </li>
    </ul>
</div>

In the controller :

$scope.tappedKeys = '';

$scope.onKeyUp = (e)=>{
  $scope.tappedKeys += e.key;
};

But the issue is the key pressed values are not clearing also when the drop down values are becoming normal once I select the value Example : https://plnkr.co/edit/vZCv3RI095snv9ITAXr8?p=preview

0

There are 0 answers