javascript - md-autocomplete ใน md-dialog สูญเสียโฟกัสเมื่อคลิก
ฉันกำลังทำงานกับ AngularJS 1.6 และ Angular Material ฉันมี md-autocomplete ซึ่งเคยทำงานได้ดีมาก แต่หลังจากที่ฉันใส่มันลงใน md-dialog กล่อง มันก็ทำงานไม่ค่อยดีอีกต่อไป ทุกครั้งที่ฉันคลิกที่ช่อง autocomplete, โฟกัสจะหายไปทันที และฉันไม่สามารถกรอกข้อมูลในช่องนี้ได้ (หรือคุณจะต้องเร็วมากเพื่อพิมพ์ตัวอักษรก่อนที่โฟกัสจะหายไป)
ฉันพยายามใช้ event.stopPropagation() เมื่อคลิก เมื่อโฟกัส และเมื่อกดคีย์ขึ้น แต่ก็ไม่ช่วยอะไร ฉันคิดอยู่ครู่หนึ่งว่าขอบเขตของสองคอนโทรลเลอร์ขัดกัน ดังนั้นฉันจึงลบการเชื่อมโยงระหว่างสองขอบเขตออก และก็ยังไม่ช่วยอะไร ฉันค้นหาดูบ้างแล้วแต่ดูเหมือนว่าจะไม่มีใครเคยเจอปัญหานี้มาก่อน
นี่คือโค้ดที่เรียกใช้งาน md-dialog :
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>
หมายเหตุ : ชั่วครู่หนึ่งฉันคิดว่าปัญหาน่าจะมาจากป้ายลอยเพราะฉันได้รับคำเตือนต่อไปนี้ในคอนโซลของฉัน :
ข้อความ 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>
คำตอบ #1
ดูเหมือนว่าปัญหาคือ md-fab-speed-dial ซึ่งด้วยเหตุผลที่ไม่ทราบ มันยังคงถูกโฟกัสอยู่ไม่ว่าอย่างไรก็ตาม ฉันเพิ่งเปลี่ยนทั้งหมดเป็นปุ่มธรรมดาและตอนนี้มันทำงานได้ดี
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>