Javascript md对话框中的md自动完成在单击时失去焦点

我正在使用AngularJS 1.6和Angular Material，我有一个md autocomplete，它以前工作得很好，但在我将它放入md对话框后，它就不再工作了。每当我点击“自动完成”字段时，焦点会立即消失，而且我无法填充输入。（或者你必须在焦点消失之前快速写信）

我尝试在单击、聚焦和键控时执行event.stopPropagation（），但没有任何帮助。 我想了一会儿，两个控制器的作用域发生了冲突，所以我删除了两个作用域之间的链接，这没有任何帮助。我搜索了一下，似乎以前没有人遇到过

以下是触发md对话框的代码：

    public showAddAuthDialog(ev: any) {

        this.$mdDialog.show({
            controller: AddJobAuthDialogController,
            controllerAs: "AddAuthDialog",
            templateUrl: 'public/app/views/dialogs/addAuthDialog.html',                
            targetEvent: ev,                
            clickOutsideToClose: true,
            fullscreen: this.customFullscreen,
            scope: this.$scope,
            preserveScope:true            
        });
    }    

注意：我通过作用域来保存数据，我认为这就是问题所在，所以我删除了它，没有任何更改

以下是对话框控制器的代码：

     export class AddJobAuthDialogController {
         static $inject = ['$scope','$mdDialog',
              '$timeout',
                '$q',
                 'jobService'];
         public simulateQuery: boolean;
         public selectedItem: any;
         public selectedItemId: string;
         public searchTxt: string;      
         public jobsToSearch: any;            
         public selectedItemAD: any;
         public searchTxtAD: string;            
         public grpsToSearch: any;
         public customFullscreen = false;



    constructor(public $scope: any,
        public $mdDialog: any,
        public $timeout: any,
        public $q: any,
        public jobService: jobs.IJobService) {

        this.simulateQuery = true;
        this.selectedItem = null;
        this.searchTxt = null;
        this.selectedItemAD = null;
        this.searchTxtAD = null;

        this.jobsToSearch = this.$scope.Administration.jobsToSearch;
        this.grpsToSearch = this.$scope.Administration.grpsToSearch;

    }

    public $onChanges(changes) {
        if (changes.selectedItem) {
            this.selectedItem = changes.selectedItem.currentValue;
        }
        if (changes.jobsToSearch) {
            this.jobsToSearch = changes.jobsToSearch.currentValue;
        }
        if (changes.selectedItemId) {
            this.selectedItemId = changes.selectedItemId.currentValue;
        }
        if (changes.grpsToSearch) {
            this.grpsToSearch = changes.grpsToSearch.currentValue;
        }
    }

    public sendForm(event: any) {
        this.jobService.saveNewEntry(this.selectedItem.value, this.selectedItemAD.value).then((d) => {
            console.log(d);
            if (d.data == -1)
                this.showError(event);
            else
                this.showSuccess(event);
        });
    }

    public showSuccess(ev: any) {
        this.$mdDialog.show({
            controller: InsertDialogController,
            controllerAs: "InsertDialog",
            templateUrl: 'public/app/views/dialogs/adminInsertSuccessDialog.html',
            parent: angular.element(document.body),
            targetEvent: ev,
            clickOutsideToClose: true,
            fullscreen: this.customFullscreen // Only for -xs, -sm breakpoints.
        });
    };

    public showError(ev: any) {
        this.$mdDialog.show({
            controller: InsertDialogController,
            controllerAs: "InsertDialog",
            templateUrl: 'public/app/views/dialogs/adminInsertFailDialog.html',
            parent: angular.element(document.body),
            targetEvent: ev,
            clickOutsideToClose: true,
            fullscreen: this.customFullscreen // Only for -xs, -sm breakpoints.
        });
    };

    public querySearch(query, objectToSearch) {
        var results = query ? objectToSearch.filter(this.createFilterFor(query)) : objectToSearch,
            deferred;
        if (this.simulateQuery) {
            deferred = this.$q.defer();
            this.$timeout(function () { deferred.resolve(results); }, Math.random() * 1000, false);
            return deferred.promise;
        } else {
            return results;
        }
    }

    public createFilterFor(query) {
        var lowercaseQuery = angular.lowercase(query);
        return (res) => {
            return (angular.lowercase(res.display).indexOf(lowercaseQuery) !== -1);
        };
    }

    public cancelDialog() {
        this.$mdDialog.cancel();
    }
}

下面是html模板：

    <md-dialog class="dialogSuccess" aria-label="Add Groups To Job">

    <md-toolbar>
        <div class="md-toolbar-tools">
            <h2>Add Groups To Job</h2>
            <span flex></span>
            <md-button class="md-icon-button" ng-click="AddAuthDialog.cancelDialog()">
                <md-icon class="closeIcon" md-font-icon="mdi mdi-close" aria-label="Close dialog"></md-icon>
            </md-button>
        </div>
    </md-toolbar>

    <md-content layout="column" flex ng-cloak>
        <div class="md-dialog-content">
            <form>
                <md-autocomplete flex
                                 md-input-name="autocompleteField"
                                 md-input-minlength="0"
                                 md-input-maxlength="18"
                                 md-no-cache="true"
                                 md-selected-item="AddAuthDialog.selectedItem"
                                 md-search-text="AddAuthDialog.searchTxt"
                                 md-items="item in AddAuthDialog.querySearch(AddAuthDialog.searchTxt,AddAuthDialog.jobsToSearch)"
                                 md-item-text="item.display"                                                                                        
                                 md-floating-label="Jobs">
                    <md-item-template>
                        <span md-highlight-text="AddAuthDialog.searchTxt">{{item.display}}</span>
                    </md-item-template>
                    <md-not-found>Job "{{AddAuthDialog.searchTxt}}" not found </md-not-found>
                </md-autocomplete>

                <md-autocomplete flex
                                 md-input-name="autocompleteFieldAD"
                                 md-input-minlength="3"
                                 md-input-maxlength="18"
                                 md-no-cache="true"
                                 md-selected-item="AddAuthDialog.selectedItemAD"
                                 md-search-text="AddAuthDialog.searchTxtAD"
                                 md-items="i in AddAuthDialog.querySearch(AddAuthDialog.searchTxtAD,AddAuthDialog.grpsToSearch)"
                                 md-item-text="i.display"
                                 md-floating-label="AD Groups">
                    <md-item-template>
                        <span md-highlight-text="AddAuthDialog.searchTxtAD">{{i.display}}</span>
                    </md-item-template>
                    <md-not-found>Job "{{AddAuthDialog.searchTxtAD}}" not found </md-not-found>
                </md-autocomplete>

            </form>
        </div>
    </md-content>


<md-dialog-actions>
    <md-button class="md-raised md-primary md-hue-1" ng-click="AddAuthDialog.sendForm()">Add</md-button>
</md-dialog-actions>

 </md-dialog>

将组添加到作业中
{{item.display}
找不到作业“{AddAuthDialog.searchTxt}}”
{{i.display}
找不到作业“{AddAuthDialog.searchTxtAD}}”
添加

注意：有一段时间我认为问题在于浮动标签，因为我的控制台中有以下警告：

mdInput消息显示在无效消息元素上调用的动画：JQLite[md input container.ng scope.md input focused.md input has value.ng animate.md input invalid]

然后我将其删除，以放置一个占位符，但行为没有改变。 你知道问题可能来自哪里吗

更新：

焦点似乎丢失了，因为它重新聚焦在已单击的按钮上，如果我取消聚焦按钮，页面上的每个事件都不会再触发

以下是按钮的html代码：

      <div class="fab-container" layout="row" layout-align="end end">
    <md-fab-speed-dial md-open="false" md-direction="up"
                       ng-class="md-fling">
        <md-fab-trigger ng-click="Administration.showAddAuthDialog($event)" ng-focus="false">
            <md-button aria-label="menu" class="md-fab md-accent">
                <md-icon class="mdi mdi-plus fab-button-icon"></md-icon>
            </md-button>
        </md-fab-trigger>          
    </md-fab-speed-dial>
</div>

---

问题似乎出在md fab的高速拨号盘上，不知什么原因，它始终保持着焦点。 我只是用一个简单的按钮替换了整个东西，现在它工作得很好

新的html：

    <div layout="row" layout-align="end end">       
            <md-button  ng-click="Administration.showAddAuthDialog($event)" aria-label="menu" class="md-fab md-accent">
                <md-icon class="mdi mdi-plus fab-button-icon"></md-icon>                    
            </md-button>          
</div>