Merge pull request #17586 from abpframework/issue-17585

Fix incorrect tab selection on modal opening feature management

npm/ng-packs/packages/feature-management/src/lib/components/feature-management-tab/feature-management-tab.component.html

@@ -4,7 +4,8 @@
   <i class="fa fa-cog" aria-hidden="true"></i>
   {{ 'AbpFeatureManagement::ManageHostFeatures' | abpLocalization }}
 </button>
-<abp-feature-management
+<ng-container *ngIf="visibleFeatures">
+  <abp-feature-management
   *abpReplaceableTemplate="{
     inputs: {
       providerName: { value: 'T' },
@@ -17,5 +18,6 @@
   [(visible)]="visibleFeatures"
   providerName="T"
   [providerKey]="providerKey"
->
+  >
 </abp-feature-management>
+</ng-container>

npm/ng-packs/packages/feature-management/src/lib/components/feature-management-tab/feature-management-tab.component.ts

@@ -9,9 +9,7 @@ export class FeatureManagementTabComponent {
   providerKey: string;
 
   openFeaturesModal() {
-    setTimeout(() => {
-      this.visibleFeatures = true;
-    }, 0);
+    this.visibleFeatures = true;
   }
 
   onVisibleFeaturesChange = (value: boolean) => {

npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.ts

@@ -55,11 +55,17 @@ export class FeatureManagementComponent
   }
 
   set visible(value: boolean) {
-    if (this._visible === value) return;
+    if (this._visible === value) {
+      return;
+    }
 
     this._visible = value;
     this.visibleChange.emit(value);
-    if (value) this.openModal();
+
+    if (value) {
+      this.openModal();
+      return;
+    }
   }
 
   @Output() readonly visibleChange = new EventEmitter<boolean>();