Merge pull request #9054 from abpframework/fix/9053

Let NgBootstrap typeahead window to get out of the modal borders

npm/ng-packs/packages/theme-shared/src/lib/constants/styles.ts

@@ -150,9 +150,9 @@ export default `
   box-shadow: none;
 }
 ngb-typeahead-window {
-  width: 100%;
   max-height: 25em;
   overflow-y: scroll !important;
+  z-index: 1050;
 }
 
 @keyframes fadeInTop {

npm/ng-packs/packages/theme-shared/src/lib/handlers/datepicker-config.ts

@@ -1,11 +0,0 @@
-import { Injector } from '@angular/core';
-import { NgbInputDatepickerConfig } from '@ng-bootstrap/ng-bootstrap';
-
-export function initDatepickerConfig(injector: Injector) {
-  const datepickerConfig = injector.get(NgbInputDatepickerConfig, null);
-  if (datepickerConfig) {
-    datepickerConfig.container = 'body';
-  }
-
-  return () => {};
-}

npm/ng-packs/packages/theme-shared/src/lib/handlers/index.ts

@@ -1,3 +1,2 @@
 export * from './error.handler';
 export * from './lazy-style.handler';
-export * from './datepicker-config';

npm/ng-packs/packages/theme-shared/src/lib/providers/index.ts

@@ -1 +1,2 @@
+export * from './ng-bootstrap-config.provider';
 export * from './route.provider';

npm/ng-packs/packages/theme-shared/src/lib/providers/ng-bootstrap-config.provider.ts

@@ -0,0 +1,21 @@
+import { APP_INITIALIZER } from '@angular/core';
+import { NgbInputDatepickerConfig, NgbTypeaheadConfig } from '@ng-bootstrap/ng-bootstrap';
+
+export const NG_BOOTSTRAP_CONFIG_PROVIDERS = [
+  {
+    provide: APP_INITIALIZER,
+    useFactory: configureNgBootstrap,
+    deps: [NgbInputDatepickerConfig, NgbTypeaheadConfig],
+    multi: true,
+  },
+];
+
+export function configureNgBootstrap(
+  datepicker: NgbInputDatepickerConfig,
+  typeahead: NgbTypeaheadConfig,
+) {
+  return () => {
+    datepicker.container = 'body';
+    typeahead.container = 'body';
+  };
+}

npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts

@@ -17,6 +17,7 @@ import { ConfirmationComponent } from './components/confirmation/confirmation.co
 import { HttpErrorWrapperComponent } from './components/http-error-wrapper/http-error-wrapper.component';
 import { LoaderBarComponent } from './components/loader-bar/loader-bar.component';
 import { LoadingComponent } from './components/loading/loading.component';
+import { ModalCloseDirective } from './components/modal/modal-close.directive';
 import { ModalContainerComponent } from './components/modal/modal-container.component';
 import { ModalComponent } from './components/modal/modal.component';
 import { SortOrderIconComponent } from './components/sort-order-icon/sort-order-icon.component';
@@ -33,12 +34,11 @@ import { TableSortDirective } from './directives/table-sort.directive';
 import { ErrorHandler } from './handlers/error.handler';
 import { initLazyStyleHandler } from './handlers/lazy-style.handler';
 import { RootParams } from './models/common';
+import { NG_BOOTSTRAP_CONFIG_PROVIDERS } from './providers';
 import { THEME_SHARED_ROUTE_PROVIDERS } from './providers/route.provider';
 import { THEME_SHARED_APPEND_CONTENT } from './tokens/append-content.token';
-import { HTTP_ERROR_CONFIG, httpErrorConfigFactory } from './tokens/http-error.token';
+import { httpErrorConfigFactory, HTTP_ERROR_CONFIG } from './tokens/http-error.token';
 import { DateParserFormatter } from './utils/date-parser-formatter';
-import { ModalCloseDirective } from './components/modal/modal-close.directive';
-import { initDatepickerConfig } from './handlers/datepicker-config';
 
 const declarationsWithExports = [
   BreadcrumbComponent,
@@ -111,12 +111,6 @@ export class ThemeSharedModule {
           deps: [Injector],
           useFactory: initLazyStyleHandler,
         },
-        {
-          provide: APP_INITIALIZER,
-          multi: true,
-          deps: [Injector],
-          useFactory: initDatepickerConfig,
-        },
         { provide: HTTP_ERROR_CONFIG, useValue: httpErrorConfig },
         {
           provide: 'HTTP_ERROR_CONFIG',
@@ -124,6 +118,7 @@ export class ThemeSharedModule {
           deps: [HTTP_ERROR_CONFIG],
         },
         { provide: NgbDateParserFormatter, useClass: DateParserFormatter },
+        NG_BOOTSTRAP_CONFIG_PROVIDERS,
         {
           provide: VALIDATION_BLUEPRINTS,
           useValue: {