Watch video: dropdown does not appear after toggled by Angul


Topic: Watch video: dropdown does not appear after toggled by Angular

rikuwolf pro premium asked a year ago

Expected behavior

Angular toggles the visibility of a nav link by the *ngIf structural directive. When a user authenticates, we show their name and other changes in the navbar. When the "isAuthenticated" property is true, the dropdown should show.

Actual behavior

Watch the video: https://www.screencast.com/t/VDipCIMf2 The user authenticates, which adds the dropdown element to the navbar. But clicking on the dropdown nav-item does not open the dropdown. If you resize the window a little (also in the video), the dropdown appears. If the user is authenticated from the start, there is no problem. This problem only occurs when Angular adds the dropdown to the DOM by the *ngIf directive.

In the video, you can see the isAuthenticated value printed to the navbar as ((ia:true)). It changes from false to true. I even tried using Angular's detectChanges() method, but this also does not solve the problem.

Resources (screenshots, code snippets etc.)

The dropdown nodes exist in the DOM, because you can inspect it in Chrome dev tools. The problem is just the rendering of the dropdown. I tried removing the mdbWavesEffect directive and "waves-light" class from these elements, but those did not solve the problem.

<header>

  <!-- Navbar brand -->
  <mdb-navbar-brand><a class="navbar-brand" [routerLink]="['/']">
    (site name)
  </a>
</mdb-navbar-brand>



  <!-- Collapsible content -->
  <links>

    <!-- Links -->
    <ul class="navbar-nav mr-auto">
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link waves-light" [routerLink]="['/podcast/episodes/how-to-keep-up-to-date-when-cultures-change']" mdbWavesEffect>
          <span *transloco="let t">
            <strong>{{ t('SHOWS.EPISODES') }}</strong>
          </span>
          <span class="sr-only">(current)</span>
        </a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link waves-light" [routerLink]="['/guests/1']" mdbWavesEffect>
          <span *transloco="let t">
            <strong>{{ t('SHOWS.GUESTS') }}</strong>
          </span>
        </a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link waves-light" [routerLink]="['/tools/1']" mdbWavesEffect>
          <span *transloco="let t">
            <strong>{{ t('TOOLS.TOOLS') }}</strong>
          </span>
        </a>
      </li>
    </ul>
    <!-- Links -->
    <ul class="navbar-nav ml-auto nav-flex-icons">
      <li class="nav-item" *ngIf="!isAuthenticated">
        <a class="nav-link" [routerLink]="['/register']">
          <mdb-icon fas icon="user-plus"></mdb-icon>
          <span *transloco="let t">
            <strong>{{ t('COMMON.REGISTER') }}</strong>
          </span>
        </a>
      </li>
      <li class="nav-item" *ngIf="!isAuthenticated">
        <a class="nav-link" [routerLink]="['/login']">
          <mdb-icon fas icon="sign-in-alt"></mdb-icon>
          <span *transloco="let t">
            <strong>{{ t('COMMON.LOG_IN') }}</strong>
          </span>
        </a>
      </li>
      <li class="nav-item avatar dropdown mt-1" dropdown *ngIf="isAuthenticated">
        <a dropdownToggle mdbWavesEffect type="button" class="nav-link dropdown-toggle waves-light" mdbWavesEffect>
          <span>{{user.fname+' '+user.lname}}</span>
          <img src="{{user.picture || 'https://randomuser.me/api/portraits/women/40.jpg'}}" alt="" class="img-fluid rounded-circle z-depth-0">
        </a>
        <div *dropdownMenu class="dropdown-menu dropdown-menu-right dropdown dropdown-primary" role="menu">
          <a class="dropdown-item waves-light" mdbWavesEffect href="#">My account</a>
          <a class="dropdown-item waves-light" mdbWavesEffect (click)="logout()">Log out</a>
        </div>
      </li>
    </ul>
  </links>
  <!-- Collapsible content -->

</mdb-navbar>
<!--/.Navbar-->

Company | Privacy | Help | About


Arkadiusz Idzikowski staff commented a year ago

@rikuwolf Do you use MDB Angular v10.1.1 and the dropdown is inside mdb-navbar component?

We tested that on the 'Navbar with image dropdown' example from our documentation and we could not reproduce this problem. Did you try to test that with different browser window sizes?

Please add the whole navbar component code with all settings so we can try to reproduce this bug on the exact same example.


rikuwolf pro premium commented a year ago

OK, I've updated the original post with the full app.component.html code (which this mdbootstrap.com code editor is rendering strangely here, but hopefully you can open the source code).My version of MDB Angular is 11.0.0, not 10.x which I said earlier.I can recreate this problem in Firefox and Chrome and at various window sizes.


rikuwolf pro premium commented a year ago

Here's another short video, this time in Firefox in a wider window.

https://www.screencast.com/t/fWhN3wFfwzb

Some more things I notice:

The large "trade secrets" element in the main body of the screen also fails to render correctly. When the window is resized, the rendering is corrected.

If the dropdown can be toggled open-closed invisibly in both open and closed states. Click once for open, click again to close. If you resize the window when the invisible dropdown is open, it will appear. If the invisible dropdown is closed when you resize the window, it naturally will not appear.


Arkadiusz Idzikowski staff commented a year ago

@rikuwolf We tried to reproduce this problem using your example but everything worked correctly. Can you create a new app view and test that using an example from our documentation when only navbar and dropdown are displayed in the view? Maybe the styles of other items affect the dropdown position in some way.

Do you use any custom styles and OnPush/custom change detection strategy?


rikuwolf pro premium commented a year ago

Thank you for investigating this. No, this problem is happening with Angular's default change detection strategy. The only thing that is a bit unusual in this local dev environment is that it is generated and served by Nx. I will soon be able to test this in production, which will have a traditional linux/nginx environment.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 10.1.1
  • Device: Mac
  • Browser: Firefox, Chrome
  • OS: Mac OS, Big Sur
  • Provided sample code: No
  • Provided link: Yes