How to solve the problem that angularjs md-autocomplete does not show the drop-down list (height:0) after clicking X many times?

what can I do if angularjs md-autocomplete clicks X many times and does not display a drop-down list (height:0)?

the method passed outside the instruction is called within the

selectedItemChange method

/**
 * 
 * <md-autocomplete>
 * 
 * // $scope.querySearch: "",  // 
 * // $scope.searchTextChange: "",  // 
 * // $scope.selectedItemChange: "",  // 
 * // $scope.enterAccount: "",  // 
 * <cf-accountitem 
 *    ng-model="myVm.accountitemid" 
 *    bind-key="id" 
 *    name-key="longname" 
 *    list-filter="{iscash : 1}"
 *    afterchange="afterchange(row)"
 *    is-group="true"
 *    only-leaf="true"
 *    poptitle="">
 *  </cf-accountitem>
 */
angular.module("cloudfi.gl").directive("cfAccountitem", cfAccountitemFn);

function cfAccountitemFn() {
  "use strict";
  return {
    restrict: "AE",
    template: [
      "<div class="featureGlassBox autocompletedemoBasicUsage"> " +
      "  <span ng-if="!listLoad || !$parent.load" class="glassBoxLoad">...</span>" +
      "  <md-autocomplete ng-if="listLoad && $parent.load"" +
      "    md-search-text-change="searchTextChange(vm.searchText,vm)" " +
      "    md-selected-item="vm.selectedItem" " +
      "    md-search-text="vm.searchText" " +
      "    md-selected-item-change="selectedItemChange(item,vm)" " +
      "    md-items="item in querySearch(vm.searchText)" " +
      "    md-item-text="item.number+\" \"+item[nameKey]" " +
      "    md-min-length="0" " +
      "    selected-item="vm.selectedItem" " +
      "    md-no-cache="true" " +
      "    placeholder="{{placeholder}}" " +
      "    ng-disabled="disabled" " +
      "    title="{{vm.selectedItem.numAndName}}" " +
      "    md-clear-button="!(readonly) && !(disabled)" " +
      "    md-menu-class="mdACExtralClass" " +
      "    ng-keyup="enterAccount($event)"> " +
      "    <md-item-template> " +
      "      <span md-highlight-text="vm.searchText" md-highlight-flags="^i" title="{{item.numAndName}}">{{item.numAndName}}</span> " +
      "    </md-item-template> " +
      "    <md-not-found> " +
      "       "{{vm.searchText}}" " +
      "    </md-not-found> " +
      "  </md-autocomplete> " +
      "  <i class="featureGlass" ng-if="listLoad && !disabled" ng-show="!vm.searchText" ng-click="open($event,300,vm,$index)"></i> " +
      "</div> "
    ].join(""),
    scope: {
      ngModel: "=",
      bindKey: "@", // rowbindKeyngModel
      nameKey: "@", // rownameKeyinput,longname
      onlyLeaf: "=", // list
      onlyCash: "=", // list
      onlyBank: "=", // list
      onlyHasAssit: "=", // list
      onlyAc: "=", // list
      cashOrBank: "@", // list
      afterChange: "&", // row
      afterSelect: "&", // input
      disabled: "=", // 
      readonly: "=", // 
      isGroup: "@", // 
      poptitle: "@poptitle", // 
      cfClass: "@cfClass", // class
      linkLevel: "=", // 
      linkNextAct: "=", // for:-
      placeholder: "@", // input
    },
    controller: ["$scope", "$element", "$attrs", "$timeout", "$filter", "$uibModal", "dataStoreService", function ($scope, $element, $attrs, $timeout, $filter, $uibModal, dataStoreService) {

      $scope.listLoad = false;

      // 
      $scope.vm = {
        searchText: "", // ,
        selectedItem: "" // 
      };
      // 
      var allList = [];
      // 
      var list = [];
      // 
      var itemtype = [];

      init();

      // :
      // 1.
      // 2.
      function init(){
        // 
        allList = $scope.isGroup ? dataStoreService.get("groupAccountitem") : dataStoreService.get("accountitem");

        // 
        list = createList();
        // 
        itemtype = dataStoreService.get("itemtype");

        // 
        function createList() {
          // 1.
          if ($scope.onlyLeaf) {
            list = [];
            angular.forEach(allList, function (v) {
              if (v.isLeaf == 1) {
                this.push(v);
              }
            }, list);
          } else {
            list = angular.copy(allList);
          }
          // 2.
          if ($scope.cashOrBank) {
            list = list.filter(function(v){
              return v.iscash == 1 || v.isbank== 1;
            })
          } 
          // 3.
          if ($scope.onlyCash) {
            list = list.filter(function(v){
              return v.iscash == 1;
            })
          } 
          // 4.
          if ($scope.onlyBank) {
            list = list.filter(function(v){
              return v.isbank == 1;
            })
          } 
          // 5.idlist
          if ($scope.onlyHasAssit) {
            list = list.filter(function(v){
              return v.caaid;
            })
          } 

          // 5.list
          if ($scope.onlyAc) {
            list = list.filter(function(v){
              return v.ac;
            })
          }  

          $scope.listLoad = true;

          return list;
        }

        if($attrs.onlyCash){
          $scope.$watch("onlyCash", function (newValue, oldValue, scope) {
            createList();
          });
        }

        if($attrs.onlyBank){
          $scope.$watch("onlyBank", function (newValue, oldValue, scope) {
            createList();
          });
        }

        $scope.bindKey = $scope.bindKey || "id";
        $scope.nameKey = $scope.nameKey || "longname";
      }

      // 
      $scope.querySearch = function (query) {
        // input
        var readonly = $($element).find("input").attr("readonly");
        if(readonly == "readonly"){
          return [];
        }else{
          return query ? list.filter(createFilterFor(query)) : list;
        }
      }

      // 
      function createFilterFor(query) {
        // `.` `
        var noPointQuery = (query || "").replace(/\.|\s/g, "");
        return function filterFn(state) {
          // name
          return (state.numAndName.replace(/\.|\s/g, "").indexOf(noPointQuery) > -1);
        };
      }

      // 
      $scope.searchTextChange = function (searchText, info) {
        $scope.vm.searchText = searchText;
        innerChangeNgModel(null);
      }

      // ngModel
      // row: 
      // modalSel: 
      function innerChangeNgModel(row,modalSel) {
        if (row) {
          if(($scope.ngModel != row[$scope.bindKey]) ){
            // 
            $scope.ngModel = row[$scope.bindKey];
            var copyRow = angular.copy(row);
            if ($scope.afterChange && $scope.afterChange.constructor === Function) {
              $scope.afterChange({
                row: copyRow
              });
            }
            // 
            if($attrs.linkLevel){
              $scope.linkLevel = row.level;
            }
            // 
            if($attrs.linkNextAct){
              if(!$scope.linkNextAct){
                $scope.linkNextAct = row[$scope.bindKey];
              }
            }
          }else{
            console.log("")
          }
        } else {
          if($scope.ngModel){
            $scope.ngModel = "";
            if ($scope.afterChange && $scope.afterChange.constructor === Function) {
              $scope.afterChange({
                row: null
              });
            }
          }else{
            console.log("")
          }
        }

        if(modalSel){
          if ($scope.afterSelect && $scope.afterSelect.constructor === Function) {
            $scope.afterSelect({
              dom: $($element).find("input")
            });
          }
        }

      }

      // 
      $scope.selectedItemChange = function (selectedItem, info) {
        innerChangeNgModel(selectedItem);
      }

      // 
      $scope.enterAccount = function (e) {
        if (e.keyCode != 13 || !$scope.vm.searchText) {
          return;
        }
        var result = $scope.querySearch($scope.vm.searchText);
        if (result && result[0]) {
          innerChangeNgModel(result[0]);
        }
      }

      $scope.$watch("ngModel", function (newValue, oldValue, scope) {
        ngModelUpdInner($scope.ngModel);
      });

      // ngModel
      function ngModelUpdInner(val) {
        if (val) {
          var row = list.filter(function (v) {
            return v[$scope.bindKey] == val;
          });
          if (row && row[0]) {
            var copyRow = angular.copy(row[0]);
            $scope.vm.selectedItem = copyRow;
          }else{
            $scope.vm.selectedItem = null;
            $scope.vm.searchText = val;
          }
        } else {
          $scope.vm.selectedItem = null;
          $scope.vm.searchText = "";
        }
      }

      //       
      $scope.open = function () {
        var modalInstance = $uibModal.open({
          animation: $scope.animationsEnabled,
          templateUrl: "js/directive/common/cfAccountitem/cfAccountitemModal.html",
          controller: "cfAccountitemModalCtrl",
          resolve: {
            poptitle: function () {
              if ($scope.poptitle) {
                return $scope.poptitle;
              }
            },
            fullList: function () {
              return list;
            }
          }
        });
        modalInstance.result.then(function (row) {
          if (row) {
            $scope.vm.selectedItem = row;
            innerChangeNgModel(row,"modalSel");
          }
        }, function () {
          console.log(("Modal dismissed at: " + new Date()));
        });
      }

    }]
  }
}
Jun.21,2021
Menu