Topic: CDK Overlay Stays After Selecting Dropdown Option

tdespenza priority asked 1 year ago

Select options don't go away when option is selected.

List of options stays but aren't selectable.


These are the errors I see.

I created an app using this command

yarn nx g @nrwl/angular:host host --remotes=dashboard --ssr=true --backendProject=backend --dynamic=true --directory=frontend --style=scss

I then added a drop down with arbitrary values in the dashboard project.

Here's the RemoteEntryModule in the Dashboard project.

    declarations: [RemoteEntryComponent],
    imports: [
    providers: [...provideAnimations()]
export class RemoteEntryModule { }

I created a container component SCAM. In the ContainerComponentModule I have this code:

  imports: [
  declarations: [ContainerComponent],
  exports: [ContainerComponent]
export class ContainerComponentModule {}

In the ContainerCompenent I have this code:

export class ContainerComponent {
  options = [
    { value: '1', label: 'One' },
    { value: '2', label: 'Two' },
    { value: '3', label: 'Three' },
    { value: '4', label: 'Four' },
    { value: '5', label: 'Five' },
    { value: '6', label: 'Six' },
    { value: '7', label: 'Seven' },
    { value: '8', label: 'Eighth' }

Here's the HTML markup:

<section [style]="{'margin-bottom': '300px'}" class="container-fluid">
    <h1 class="text-center pb-5">DASHBOARD</h1>
        <mdb-option *ngFor="let option of options" [value]="option.value">{{
      <label class="form-label" mdbLabel>Example label</label>

In the module-federation.config.js of the dashboard project, I have this code:

const coreLibraries = [

module.exports = {
  name: 'frontend-dashboard',
  exposes: {
  shared: (libraryName, defaultConfig) => {
    const isValid = coreLibraries.some((library) =>
    if (isValid) {
     return { ...defaultConfig, eager: true, strictVersion: false };

    return defaultConfig;

Arkadiusz Idzikowski staff commented 1 year ago

We could not reproduce such a problem on our end. Could you please edit your post and provide more information about the code you use and the reproduction steps?

Are there any errors in the console when you try to close the select menu?

tdespenza priority commented 1 year ago

I made the updates

Arkadiusz Idzikowski staff commented 1 year ago

We would need more information about the MDB module imports and HTML/TS code that you used to render the table component. Did you follow our installation guide and imported all the necessary MDB modules in your app?

Could you also please check the console and confirm if there are any errors when you try to use/close the dropdown?

tdespenza priority commented 1 year ago

Thanks for the response. I updated the post. I downloaded MDB file manually and added it to my package.json like this "mdb-angular-ui-kit": "file:mdb-angular-ui-kit-4.0.0.tgz".

tdespenza priority commented 1 year ago

I dug a litter deeper and I'm getting this warning in my console.

Unsatisfied version 4.0.0 from frontend-host of shared singleton module mdb-angular-ui-kit/collapse (required =file:mdb-angular-ui-kit-4.0.0.tgz)

Arkadiusz Idzikowski staff commented 1 year ago

All of our modules are exported as a secondary entry points (for example mdb-angular-ui-kit/select or mdb-angular-ui-kit/collapse). I think you may need to include these packages separately in your module federation config (and also @angular/cdk which we use to display components like dropdowns and dialogs).

tdespenza priority commented 1 year ago

I finally got it. I had to move providers: [...provideAnimations()] to the AppModule and it's working now. Thanks for your help.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 4.0.0
  • Device: MacBook Pro
  • Browser: Chrome
  • OS: MacOS
  • Provided sample code: Yes
  • Provided link: Yes