CDK Overlay Stays After Selecting Dropdown Option

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.

**Video: https://web.tresorit.com/l/BQh8x#7vOND3lE1-So3n9WonOU5w*

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.

@NgModule({
    declarations: [RemoteEntryComponent],
    imports: [
      CommonModule,
      RouterModule.forChild(remoteRoutes),
      ContainerComponentModule
    ],
    providers: [...provideAnimations()]
})
export class RemoteEntryModule { }

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

@NgModule({
  imports: [
    MdbSelectModule,
    NgForOf
  ],
  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">
  <header>
    <h1 class="text-center pb-5">DASHBOARD</h1>
  </header>
  <section>
    <mdb-form-control>
      <mdb-select>
        <mdb-option *ngFor="let option of options" [value]="option.value">{{
          option.label
          }}</mdb-option>
      </mdb-select>
      <label class="form-label" mdbLabel>Example label</label>
    </mdb-form-control>
  </section>
</section>

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

const coreLibraries = [
  'mdb-angular-ui-kit',
  '@angular',
  '@microfrontends',
  'chart',
  '@fortawesome',
  '@module-federation',
  'rxjs'
];

module.exports = {
  name: 'frontend-dashboard',
  exposes: {
    './Module':
     'packages/frontend/dashboard/src/app/remote-entry/entry.module.ts'
  },
  shared: (libraryName, defaultConfig) => {
    const isValid = coreLibraries.some((library) =>
      libraryName.startsWith(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?

https://mdbootstrap.com/docs/angular/pro/installation/https://mdbootstrap.com/docs/angular/pro/modules-and-imports/

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

Please insert min. 15 characters.

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.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

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

tdespenza

20Support score
6Questions 1Answers 0Snippets