1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Angular 18 Dropdown in Navbar is initially expanded

sistemiUCSC priority asked 3 weeks ago

*_Expected behavior_*drop down open and close should work and by default the dropdown should be close which is right here in open state.

*Actual behavior*dropdown is not working and by default dropdown state is open.

Resources (screenshots, code snippets etc.)

<div class="btn-body">
  <uf *ngIf="iconLeft" icon="{{ iconLeft.iconName }}" class="uf left" [ngClass]="{'m-0': onlyIconLeft}"
    [loadSvgFile]="iconLeft.loadSvgFile" [showCircle]="iconLeft.showCircle" [color]="iconLeft.color"></uf>
  <div class="text" *ngIf="buttonDropDown.label">
    {{ buttonDropDown.label | translate }}
    <ng-container *ngIf="buttonDropDown.label2">
      <br />
      {{ buttonDropDown.label2 | translate}}
    </ng-container>
  </div>
  <uf *ngIf="iconRight" icon="{{ iconRight.iconName }}" class="uf right" [ngClass]="{'m-0': onlyIconRight}"
    [loadSvgFile]="iconRight.loadSvgFile" [showCircle]="iconRight.showCircle" [color]="iconRight.color"></uf>
</div>

{{ buttonDropDown.counterValue }}

Arkadiusz Idzikowski staff commented 3 weeks ago

Is it a full HTML code that you wanted to attach? I could not find any dropdown directive usage in this code.

Did you add MdbDropdownModule import?

sistemiUCSC priority commented 2 weeks ago

if I add it it gives me this error: "Cannot read properties of undefined (reading 'menuPositionClassChanged') "

Arkadiusz Idzikowski staff commented 2 weeks ago

Could you please edit your first post and provide a full HTML/TS code that you use for the dropdown? We won't be able to help without some additional information about your code and configuration.

sistemiUCSC priority commented 2 weeks ago

constructor( private dropdownService: NgxUnicattDropdownService, private ele: ElementRef ) { }

ngOnInit(): void { this.dropdownSub = this.dropdownService.dropdownState$ .subscribe((openedId: string | null) => { // Se l'id non corrisponde a questo dropdown, chiudi questo dropdown if (openedId !== this.uuid) { this.hideDrop(); } }); }

ngOnChanges(changes: SimpleChanges): void { for (const propName in changes) { const change = changes[propName];

  if (propName === 'buttonDropDown') {
    if (change.currentValue) {
      if (
        change.currentValue.icon &&
        typeof change.currentValue.icon == 'string'
      ) {
        this.iconLeft = new Icon({
          iconName: change.currentValue.icon,
        });
      } else {
        this.iconLeft = change.currentValue.icon;
      }

      if (
        change.currentValue.icon &&
        typeof change.currentValue.iconRight == 'string'
      ) {
        this.iconRight = new Icon({
          iconName: change.currentValue.iconRight,
        });
      } else {
        this.iconRight = change.currentValue.iconRight;
      }

      if (!change.currentValue.label && !change.currentValue.label2) {
        if (this.iconLeft) {
          this.onlyIconLeft = true;
        } else if (this.iconRight) {
          this.onlyIconRight = true;
        }
      }
    } else {
      this.buttonDropDown = new Button();
    }
  }
}

}

public onButtonClick(button: Button) { this.onClick.next(button); }

ngOnDestroy(): void { // Unsubscribe per evitare memory leaks if (this.dropdownSub) { this.dropdownSub.unsubscribe(); } }

public onShown() { this.dropdownService.openDropdown(this.uuid); this.calculatePosition(); }

public hideDrop() { this.dropdown.hide(); }

public onHidden() { //this.resetPosition(); }

public calculatePosition() { if (this.dropdownMenu) { const hostBCR = this.ele.nativeElement.getBoundingClientRect(); const menuBCR = this.dropdownMenu.nativeElement.getBoundingClientRect();

  if (menuBCR.top <= 0) {
    this.dropdownMenu.nativeElement.style.opacity = 0;
  }

  const html = document.documentElement;
  const windowHeight = window.innerHeight || html.clientHeight;
  const windowWidth = window.innerWidth || html.clientWidth;

  const rectTop = hostBCR.top + this.topOffset;
  const rectLeft = hostBCR.left + this.leftOffset;

  const showToTop = rectTop + menuBCR.height >= windowHeight;
  const showToRight = rectLeft + menuBCR.width >= windowWidth;

  if (showToTop) {
    this.dropdownMenu.nativeElement.style.top =
      rectTop - menuBCR.height + 'px';
  } else {
    this.dropdownMenu.nativeElement.style.top = rectTop + 'px';
  }

  if (showToRight) {
    this.dropdownMenu.nativeElement.style.left =
      rectLeft - menuBCR.width + 'px';
  } else {
    this.dropdownMenu.nativeElement.style.left = rectLeft + 'px';
  }

  setTimeout(() => {
    this.dropdownMenu.nativeElement.style.opacity = 1;
  }, 200);
}

}

isEmpty(btn: Button): boolean { return btn.label == '' && !btn.icon && !btn.iconRight; }}

sistemiUCSC priority commented 2 weeks ago

{{ buttonDropDown.label | translate }}
{{ buttonDropDown.label2 | translate}} {{ buttonDropDown.counterValue }}

Arkadiusz Idzikowski staff commented 2 weeks ago

Are you sure that you use the MDB Angular dropdown component? I don't see the MDB component syntax anywhere in the attached code.

You can find the MDB Angular dropdown documentation here: https://mdbootstrap.com/docs/angular/components/dropdowns/

sistemiUCSC priority commented 2 weeks ago

when I insert the form the error I get is this: if I add it it gives me this error: "Cannot read properties of undefined (reading 'menuPositionClassChanged') " enter code here

Dropdown button
  • Action
  • Another action
  • Something else here
    •

    Arkadiusz Idzikowski staff commented 2 weeks ago

    You probably get this error because you did not add mdbDropdownMenu directive to the ul HTML element. Please make sure to include all three directives (like in the examples in our documentation): mdbDropdown, mdbDropdownToggle and mdbDropdownMenu.

    sistemiUCSC priority commented 2 weeks ago

    I added this directive: ul mdbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenuButton"> but the result doesn't change it keeps giving me the error: Cannot read properties of undefined (reading 'menuPositionClassChanged')

    Arkadiusz Idzikowski staff commented 2 weeks ago

    Like I mentioned in the previous comment, we need some more information in order to help you resolve this problem.

    We won't be able to do that without knowing how did you configured MDB Angular in your application and what MDB Angular code did you use.

    The code you provided looks like a custom Angular code which does not contain any MDB components.

    sistemiUCSC priority commented 1 week ago 

       code html is: 
<div #dropdown class="dropdown {{ buttonDropDown.bClass }}" mdbDropdown (click)="onShown(); $event.stopPropagation()"
  (onHidden)="onHidden()"> <!-- (onShown)="onShown()" (clickOutside)="hide()" -->
  <button mdbBtn mdbWavesEffect mdbDropdownToggle
    class="d-flex btn unicatt-btn-icon-text btn-icon-text dropdown-toggle {{ buttonDropDown.bClass }} {{buttonDropDown.type}} {{buttonDropDown.colorType}} {{buttonDropDown.textType}}"
    [ngClass]="{'d-none': !buttonDropDown.display, 'hidden': !buttonDropDown.visibility, 'active': buttonDropDown.active, 'ellipsis': buttonDropDown.ellipsis, 'big' : buttonDropDown.isBig, 'compact' : buttonDropDown.isCompact, 'removeArrow': buttonDropDown.removeArrow }"
    [disabled]="!buttonDropDown.enabled">
    <div class="layer-background"></div>
    <div class="btn-body">
      <uf *ngIf="iconLeft" icon="{{ iconLeft.iconName }}" class="uf left" [ngClass]="{'m-0': onlyIconLeft}"
        [loadSvgFile]="iconLeft.loadSvgFile" [showCircle]="iconLeft.showCircle" [color]="iconLeft.color"></uf>
      <div class="text" *ngIf="buttonDropDown.label">
        {{ buttonDropDown.label | translate }}
        <ng-container *ngIf="buttonDropDown.label2">
          <br />
          {{ buttonDropDown.label2 | translate}}
        </ng-container>
      </div>
      <uf *ngIf="iconRight" icon="{{ iconRight.iconName }}" class="uf right" [ngClass]="{'m-0': onlyIconRight}"
        [loadSvgFile]="iconRight.loadSvgFile" [showCircle]="iconRight.showCircle" [color]="iconRight.color"></uf>
    </div>
  </button>
  <div class="counter" *ngIf="buttonDropDown.showCounter">
    {{ buttonDropDown.counterValue }}
  </div>

  <div mdbDropdownMenu #dropdownMenu class="dropdown-menu dropdown-primary normal">
    <ng-container *ngFor="let subButton of buttonDropDown!.subButtons!">
      <div *ngIf="isEmpty(subButton)" class="divider"></div>
      <ngx-unicatt-button *ngIf="!isEmpty(subButton)" [button]="subButton"
        (onClick)=" onButtonClick(subButton)">
      </ngx-unicatt-button>
    </ng-container>
  </div>
</div>

    sistemiUCSC priority commented 1 week ago

    mdbdropdown in the mdule: error: ngx-unicatt-global-error-handler.ts:31 Cannot read properties of undefined (reading 'menuPositionClassChanged')

    ngx-unicatt-global-error-handler.ts:32 TypeError: Cannot read properties of undefined (reading 'menuPositionClassChanged') at MdbDropdownDirective._listenToMenuPositionClassChange (mdb-angular-ui-kit-dropdown.mjs:170:28) at MdbDropdownDirective.ngAfterContentInit (mdb-angular-ui-kit-dropdown.mjs:154:14) at callHookInternal (core.mjs:5150:14) at callHook (core.mjs:5177:13) at callHooks (core.mjs:5131:17) at executeInitAndCheckHooks (core.mjs:5081:9) at refreshView (core.mjs:13283:21) at detectChangesInView (core.mjs:13454:9) at detectChangesInViewIfAttached (core.mjs:13414:5) at detectChangesInEmbeddedViews (core.mjs:13373:13) ngx-unicatt-global-error-handler.ts:31 Cannot read properties of undefined (reading 'menuPositionClassChanged') ngx-unicatt-global-error-handler.ts:32 TypeError: Cannot read properties of undefined (reading 'menuPositionClassChanged')

    sistemiUCSC priority commented 1 week ago 

        the module :
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
import { TranslateModule } from '@ngx-translate/core';
import { NgxUnicattFontsModule } from '@ngx-unicatt/fonts-v12';
import { NgxUnicattButtonToggleComponent, NgxUnicattModalComponent, NgxUnicattSearchComponent, NgxUnicattTableComponent } from './components';
import { NgxUnicattAppbarComponent } from './components/ngx-unicatt-appbar/ngx-unicatt-appbar.component';
import { NgxUnicattButtonCheckboxComponent } from './components/ngx-unicatt-button-checkbox/ngx-unicatt-button-checkbox.component';
import { NgxUnicattButtonChipComponent } from './components/ngx-unicatt-button-chip/ngx-unicatt-button-chip.component';
import { NgxUnicattButtonFabComponent } from './components/ngx-unicatt-button-fab/ngx-unicatt-button-fab.component';
import { NgxUnicattButtonLinkComponent } from './components/ngx-unicatt-button-link/ngx-unicatt-button-link.component';
import { NgxUnicattButtonRadioComponent } from './components/ngx-unicatt-button-radio/ngx-unicatt-button-radio.component';
import { NgxUnicattButtonSwitchComponent } from './components/ngx-unicatt-button-switch/ngx-unicatt-button-switch.component';
import { NgxUnicattButtonTabComponent } from './components/ngx-unicatt-button-tab/ngx-unicatt-button-tab.component';
import { NgxUnicattButtonTooltipComponent } from './components/ngx-unicatt-button-tooltip/ngx-unicatt-button-tooltip.component';
import { NgxUnicattButtonComponent } from './components/ngx-unicatt-button/ngx-unicatt-button.component';
import { NgxUnicattCardDeckComponent } from './components/ngx-unicatt-card-deck/ngx-unicatt-card-deck.component';
import { NgxUnicattCardErrorComponent } from './components/ngx-unicatt-card-error/ngx-unicatt-card-error.component';
import { NgxUnicattContentBodyComponent } from './components/ngx-unicatt-content-body/ngx-unicatt-content-body.component';
import { NgxUnicattContentFooterComponent } from './components/ngx-unicatt-content-footer/ngx-unicatt-content-footer.component';
import { NgxUnicattContentHeaderComponent } from './components/ngx-unicatt-content-header/ngx-unicatt-content-header.component';
import { NgxUnicattDatepickerComponent } from './components/ngx-unicatt-datepicker/ngx-unicatt-datepicker.component';
import { NgxUnicattErrorComponent } from './components/ngx-unicatt-error/ngx-unicatt-error.component';
import { NgxUnicattFooterComponent } from './components/ngx-unicatt-footer/ngx-unicatt-footer.component';
import { NgxUnicattFooter2Component } from './components/ngx-unicatt-footer2/ngx-unicatt-footer2.component';
import { NgxUnicattFormInputAutocompleteComponent } from './components/ngx-unicatt-form-input-autocomplete/ngx-unicatt-form-input-autocomplete.component';
import { NgxUnicattFormInputComponent } from './components/ngx-unicatt-form-input/ngx-unicatt-form-input.component';
import { NgxUnicattGenericCardDeckComponent } from './components/ngx-unicatt-generic-card-deck/ngx-unicatt-generic-card-deck.component';
import { NgxUnicattGenericModalComponent } from './components/ngx-unicatt-generic-modal/ngx-unicatt-generic-modal.component';
import { NgxUnicattHeaderComponent } from './components/ngx-unicatt-header/ngx-unicatt-header.component';
import { NgxUnicattHorizontalScrollSectionComponent } from './components/ngx-unicatt-horizontal-scroll-section/ngx-unicatt-horizontal-scroll-section.component';
import { NgxUnicattHorizontalScrollComponent } from './components/ngx-unicatt-horizontal-scroll/ngx-unicatt-horizontal-scroll.component';
import { NgxUnicattMenuDropdownComponent } from './components/ngx-unicatt-menu-dropdown/ngx-unicatt-menu-dropdown.component';
import { NgxUnicattMinicardComponent } from './components/ngx-unicatt-minicard/ngx-unicatt-minicard.component';
import { NgxUnicattQuestionModalComponent } from './components/ngx-unicatt-question-modal/ngx-unicatt-question-modal.component';
import { NgxUnicattSelectComponent } from './components/ngx-unicatt-select/ngx-unicatt-select.component';
import { NgxUnicattStructuredForListComponent } from './components/ngx-unicatt-structured-for-list/ngx-unicatt-structured-for-list.component';
import { NgxUnicattTableModalComponent } from './components/ngx-unicatt-table-modal/ngx-unicatt-table-modal.component';
import { NgxUnicattTable3Component } from './components/ngx-unicatt-table3/ngx-unicatt-table3.component';
import { NgxUnicattTextareaWysiwygComponent } from './components/ngx-unicatt-textarea-wysiwyg/ngx-unicatt-textarea-wysiwyg.component';
import { ENVIRONMENT } from './const';
import { DateInputConverterDirective } from './directives/date-input-converter.directive';
import { DebounceClickDirective } from './directives/debounce-click.directive';
import { DebounceInputDirective } from './directives/debounce-input.directive';
import { NgxUnicattUiRoutingModule } from './ngx-unicatt-ui-routing.module';
import { SafePipe } from './pipes/safe.pipe';
import { NgxUnicattDatetimeService, NgxUnicattErrorService, NgxUnicattFooter2Service, NgxUnicattFooterService, NgxUnicattModalService } from './services';
import { NgxUnicattAppbarService } from './services/ngx-unicatt-appbar-service/ngx-unicatt-appbar.service';
import { NgxUnicattDropdownService } from './services/ngx-unicatt-dropdown-service/ngx-unicatt-dropdown.service';
import { NgxUnicattHeaderService } from './services/ngx-unicatt-header-service/ngx-unicatt-header.service';
import { NgxUnicattModal2Service } from './services/ngx-unicatt-modal2-service/ngx-unicatt-modal2.service';

import { MdbAccordionModule } from 'mdb-angular-ui-kit/accordion';
import { MdbAutocompleteModule } from 'mdb-angular-ui-kit/autocomplete';
import { MdbCarouselModule } from 'mdb-angular-ui-kit/carousel';
import { MdbChartModule } from 'mdb-angular-ui-kit/charts';
import { MdbCheckboxModule } from 'mdb-angular-ui-kit/checkbox';

import { MdbDatepickerModule } from 'mdb-angular-ui-kit/datepicker';
import { MdbFormsModule } from 'mdb-angular-ui-kit/forms';
import { MdbLazyLoadingModule } from 'mdb-angular-ui-kit/lazy-loading';
import { MdbLoadingModule } from 'mdb-angular-ui-kit/loading';
import { MdbModalModule } from 'mdb-angular-ui-kit/modal';
import { MdbRadioModule } from 'mdb-angular-ui-kit/radio';
import { MdbRippleModule } from 'mdb-angular-ui-kit/ripple';
import { MdbScrollbarModule } from 'mdb-angular-ui-kit/scrollbar';
import { MdbSelectModule } from 'mdb-angular-ui-kit/select';
import { MdbSidenavModule } from 'mdb-angular-ui-kit/sidenav';
import { MdbStepperModule } from 'mdb-angular-ui-kit/stepper';
import { MdbTableModule } from 'mdb-angular-ui-kit/table';
import { MdbTabsModule } from 'mdb-angular-ui-kit/tabs';
import { MdbTimepickerModule } from 'mdb-angular-ui-kit/timepicker';
import { MdbTooltipModule } from 'mdb-angular-ui-kit/tooltip';
import { MdbValidationModule } from 'mdb-angular-ui-kit/validation';
import { MdbWysiwygModule } from 'mdb-wysiwyg';
import { MdbDropdownModule } from 'mdb-angular-ui-kit/dropdown';



@NgModule({
  imports: [
    CommonModule,
    NgxUnicattFontsModule,
    TranslateModule,
    FormsModule,
    ReactiveFormsModule,
    NgxUnicattUiRoutingModule,
    OwlDateTimeModule,
    OwlNativeDateTimeModule,
    //AngularEditorModule,
    MdbAccordionModule,
    MdbAutocompleteModule,
    MdbCarouselModule,
    MdbChartModule,
    MdbCheckboxModule,
    MdbDatepickerModule,
    MdbDropdownModule,
    MdbFormsModule,
    MdbLazyLoadingModule,
    MdbLoadingModule,
    MdbModalModule,
    MdbRadioModule,
    MdbRippleModule,
    MdbScrollbarModule,
    MdbSelectModule,
    MdbSidenavModule,
    MdbStepperModule,
    MdbTableModule,
    MdbTabsModule,
    MdbTimepickerModule,
    MdbTooltipModule,
    MdbValidationModule,
    MdbWysiwygModule

  ],
  providers: [
    //MDBSpinningPreloader,
    NgxUnicattFooterService,
    NgxUnicattFooter2Service,
    NgxUnicattErrorService,
    NgxUnicattModalService,
    NgxUnicattHeaderService,
    NgxUnicattModal2Service,
    NgxUnicattDatetimeService,
    NgxUnicattAppbarService,
    NgxUnicattDropdownService,
    //{provide: OWL_DATE_TIME_LOCALE, useValue: 'it'}
  ],
  declarations: [
    NgxUnicattHeaderComponent,
    NgxUnicattFooterComponent,
    NgxUnicattErrorComponent,
    NgxUnicattContentHeaderComponent,
    NgxUnicattContentFooterComponent,
    NgxUnicattCardErrorComponent,
    NgxUnicattQuestionModalComponent,
    NgxUnicattTableModalComponent,
    NgxUnicattGenericModalComponent,
    NgxUnicattMinicardComponent,
    NgxUnicattCardDeckComponent,
    NgxUnicattButtonComponent,
    NgxUnicattButtonLinkComponent,
    NgxUnicattButtonFabComponent,
    NgxUnicattButtonRadioComponent,
    NgxUnicattButtonCheckboxComponent,
    NgxUnicattButtonTooltipComponent,
    NgxUnicattSelectComponent,
    NgxUnicattButtonChipComponent,
    NgxUnicattButtonTabComponent,
    NgxUnicattContentBodyComponent,
    NgxUnicattModalComponent,
    NgxUnicattMenuDropdownComponent,
    DebounceClickDirective,
    DateInputConverterDirective,
    SafePipe,
    NgxUnicattHorizontalScrollComponent,
    NgxUnicattHorizontalScrollSectionComponent,
    NgxUnicattGenericCardDeckComponent,
    NgxUnicattFormInputComponent,
    NgxUnicattAppbarComponent,
    NgxUnicattFooter2Component,
    NgxUnicattFormInputAutocompleteComponent,
    NgxUnicattTable3Component,
    NgxUnicattButtonSwitchComponent,
    NgxUnicattDatepickerComponent,
    NgxUnicattTextareaWysiwygComponent,
    NgxUnicattSearchComponent,
    NgxUnicattButtonToggleComponent,
    NgxUnicattStructuredForListComponent,
    NgxUnicattTableComponent,
    DebounceInputDirective,
  ],
  exports: [
    TranslateModule,
    FormsModule,
    ReactiveFormsModule, 
    MdbAutocompleteModule,
    MdbSelectModule,
    MdbTabsModule,
    MdbModalModule,
    NgxUnicattHeaderComponent,
    NgxUnicattFooterComponent,
    NgxUnicattFooter2Component,
    NgxUnicattErrorComponent,
    NgxUnicattContentHeaderComponent,
    NgxUnicattContentFooterComponent,
    NgxUnicattCardErrorComponent,
    NgxUnicattQuestionModalComponent,
    NgxUnicattTableModalComponent,
    NgxUnicattGenericModalComponent,
    NgxUnicattMinicardComponent,
    NgxUnicattCardDeckComponent,
    NgxUnicattButtonTooltipComponent,
    NgxUnicattButtonComponent,
    NgxUnicattButtonLinkComponent,
    NgxUnicattButtonFabComponent,
    NgxUnicattButtonRadioComponent,
    NgxUnicattButtonCheckboxComponent,
    NgxUnicattSelectComponent,
    NgxUnicattButtonChipComponent,
    NgxUnicattButtonTabComponent,
    NgxUnicattContentBodyComponent,
    NgxUnicattModalComponent,
    NgxUnicattMenuDropdownComponent,
    DebounceClickDirective,
    DateInputConverterDirective,
    NgxUnicattHorizontalScrollComponent,
    NgxUnicattHorizontalScrollSectionComponent,
    NgxUnicattGenericCardDeckComponent,
    NgxUnicattFormInputComponent,
    NgxUnicattAppbarComponent,
    NgxUnicattFormInputAutocompleteComponent,
    NgxUnicattTable3Component,
    NgxUnicattButtonSwitchComponent,
    OwlDateTimeModule,
    OwlNativeDateTimeModule,
    NgxUnicattDatepickerComponent,
    NgxUnicattTextareaWysiwygComponent,
    NgxUnicattSearchComponent,
    NgxUnicattButtonToggleComponent,
    NgxUnicattStructuredForListComponent,
    NgxUnicattTableComponent,
    ]
})
export class NgxUnicattUiModule {
  static forRoot(environment?: any) {
    return {
      ngModule: NgxUnicattUiModule,
      providers: [
        { provide: ENVIRONMENT, useValue: environment },
        TranslateModule,
        //MDBSpinningPreloader,
        NgxUnicattFooterService,
        NgxUnicattFooter2Service,
        NgxUnicattErrorService,
        NgxUnicattModalService,
        NgxUnicattHeaderService,
        NgxUnicattModal2Service,
        NgxUnicattDatetimeService,
        NgxUnicattAppbarService, 
        NgxUnicattStructuredForListComponent,
        NgxUnicattDropdownService
      ],
    }
  }
}

    sistemiUCSC priority commented 1 week ago

    the error is: ngx-unicatt-global-error-handler.ts:31 Cannot read properties of undefined (reading 'menuPositionClassChanged')

    ngx-unicatt-global-error-handler.ts:32 TypeError: Cannot read properties of undefined (reading 'menuPositionClassChanged') at MdbDropdownDirective._listenToMenuPositionClassChange (mdb-angular-ui-kit-dropdown.mjs:170:28) at MdbDropdownDirective.ngAfterContentInit (mdb-angular-ui-kit-dropdown.mjs:154:14) at callHookInternal (core.mjs:5150:14) at callHook (core.mjs:5177:13) at callHooks (core.mjs:5131:17) at executeInitAndCheckHooks (core.mjs:5081:9) at refreshView (core.mjs:13283:21) at detectChangesInView (core.mjs:13454:9) at detectChangesInViewIfAttached (core.mjs:13414:5) at detectChangesInEmbeddedViews (core.mjs:13373:13) ngx-unicatt-global-error-handler.ts:31 Cannot read properties of undefined (reading 'menuPositionClassChanged') ngx-unicatt-global-error-handler.ts:32 TypeError: Cannot read properties of undefined (reading 'menuPositionClassChanged')

    sistemiUCSC priority commented 1 week ago 

        enter code here@Component({
  selector: 'ngx-unicatt-menu-dropdown',
  templateUrl: './ngx-unicatt-menu-dropdown.component.html',
  styleUrls: ['./ngx-unicatt-menu-dropdown.component.scss'],
})
export class NgxUnicattMenuDropdownComponent
  implements OnInit, OnChanges, OnDestroy {

  isOpen = false;
  private dropdownSub!: Subscription;
  @ViewChild('dropdownMenu')
  public dropdownMenu!: ElementRef;
  @ViewChild('dropdown')
  public dropdown!: any;

  public iconLeft?: Icon;
  public iconRight?: Icon;

  public onlyIconLeft = false;
  public onlyIconRight = false;

  private topOffset = -55;
  private leftOffset = -7;

  private uuid = uuid();


  @Input() buttonDropDown!: Button;

  // eslint-disable-next-line @angular-eslint/no-output-on-prefix
  @Output() onClick: EventEmitter<Button> = new EventEmitter();

  @HostListener('window:scroll', [])
  onWindowScroll() {
    this.calculatePosition();
  } // ClickOutsideModule

  constructor(
    private dropdownService: NgxUnicattDropdownService,
    private ele: ElementRef<any>
  ) { }

  ngOnInit(): void {
    this.dropdownSub = this.dropdownService.dropdownState$
      .subscribe((openedId: string | null) => {
        // Se l'id non corrisponde a questo dropdown, chiudi questo dropdown
        if (openedId !== this.uuid) {
           this.hideDrop();
         }
      });
  }

  ngOnChanges(changes: SimpleChanges): void {
    for (const propName in changes) {
      const change = changes[propName];

      if (propName === 'buttonDropDown') {
        if (change.currentValue) {
          if (
            change.currentValue.icon &&
            typeof change.currentValue.icon == 'string'
          ) {
            this.iconLeft = new Icon({
              iconName: change.currentValue.icon,
            });
          } else {
            this.iconLeft = change.currentValue.icon;
          }

          if (
            change.currentValue.icon &&
            typeof change.currentValue.iconRight == 'string'
          ) {
            this.iconRight = new Icon({
              iconName: change.currentValue.iconRight,
            });
          } else {
            this.iconRight = change.currentValue.iconRight;
          }

          if (!change.currentValue.label && !change.currentValue.label2) {
            if (this.iconLeft) {
              this.onlyIconLeft = true;
            } else if (this.iconRight) {
              this.onlyIconRight = true;
            }
          }
        } else {
          this.buttonDropDown = new Button();
        }
      }
    }
  }

  public onButtonClick(button: Button) {
    this.onClick.next(button);
  }

  ngOnDestroy(): void {
    // Unsubscribe per evitare memory leaks
    if (this.dropdownSub) {
      this.dropdownSub.unsubscribe();
    }
  }

  public onShown() {
    this.dropdownService.openDropdown(this.uuid);
    this.calculatePosition();
  }

  public hideDrop() {
    this.dropdown.hide();
  }

  public onHidden() {
    //this.resetPosition();
  }

  public calculatePosition() {
    if (this.dropdownMenu) {
      const hostBCR = this.ele.nativeElement.getBoundingClientRect();
      const menuBCR = this.dropdownMenu.nativeElement.getBoundingClientRect();

      if (menuBCR.top <= 0) {
        this.dropdownMenu.nativeElement.style.opacity = 0;
      }

      const html = document.documentElement;
      const windowHeight = window.innerHeight || html.clientHeight;
      const windowWidth = window.innerWidth || html.clientWidth;

      const rectTop = hostBCR.top + this.topOffset;
      const rectLeft = hostBCR.left + this.leftOffset;

      const showToTop = rectTop + menuBCR.height >= windowHeight;
      const showToRight = rectLeft + menuBCR.width >= windowWidth;

      if (showToTop) {
        this.dropdownMenu.nativeElement.style.top =
          rectTop - menuBCR.height + 'px';
      } else {
        this.dropdownMenu.nativeElement.style.top = rectTop + 'px';
      }

      if (showToRight) {
        this.dropdownMenu.nativeElement.style.left =
          rectLeft - menuBCR.width + 'px';
      } else {
        this.dropdownMenu.nativeElement.style.left = rectLeft + 'px';
      }

      setTimeout(() => {
        this.dropdownMenu.nativeElement.style.opacity = 1;
      }, 200);
    }
  }

  isEmpty(btn: Button): boolean {
    return btn.label == '' && !btn.icon && !btn.iconRight;
  }
}

    Arkadiusz Idzikowski staff commented 1 week ago

    Could you please test if this error occur when you replace the existing HTML code used to render the dropdown component with the code from our documentation?

    Just to make sure that the error is not caused by the modifications added in your styles or TS code.

    We tested the component on the examples from our documentation and we could not reproduce this issue.

    sistemiUCSC priority commented 1 week ago

    If you try again with your html and the problem persists

    Arkadiusz Idzikowski staff commented 6 days ago

    We have checked our component very carefully but we were not able to reproduce this problem in any way.

    Such an error can appear when the mdbDropdown directive does not have access to the mdbDropdownMenu directive (when the element containing this directive does not exist or has been removed from the DOM).

    In case of further problems, please try to reproduce this bug by recreating this small part of your application where you use our component in a new Angular application that you could share with us. Maybe then it would be easier to find the cause of the problem.

    sistemiUCSC priority commented 5 days ago 

    > TypeError: Cannot read properties of undefined (reading
> 'menuPositionClassChanged')
>     at MdbDropdownDirective._listenToMenuPositionClassChange (mdb-angular-ui-kit-dropdown.mjs:170:28)
>     at MdbDropdownDirective.ngAfterContentInit (mdb-angular-ui-kit-dropdown.mjs:154:14)
>     at callHookInternal (core.mjs:5150:14)
>     at callHook (core.mjs:5177:13)
>     at callHooks (core.mjs:5131:17)
>     at executeInitAndCheckHooks (core.mjs:5081:9)
>     at refreshView (core.mjs:13283:21)
>     at detectChangesInView (core.mjs:13454:9)
>     at detectChangesInViewIfAttached (core.mjs:13414:5)
>     at detectChangesInEmbeddedViews (core.mjs:13373:13)

    L'errore è nel mio nodemolues in questi punti:

    >  _listenToMenuPositionClassChange() {
>         this._dropdownMenu.menuPositionClassChanged
>             .pipe(takeUntil(this._destroy$))
>             .subscribe(() => this._updateOverlay());
>     }

    Arkadiusz Idzikowski staff commented 4 days ago

    I think this is the same error message as mentioned before. The error originates from our component, but we were unable to reproduce it on our end based on the information provided in this topic.

    Please try to reproduce it in a new Angular project as I suggested in my previous comment.
    Write
    Create snippet
    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
    • ForumUser: Priority
    • Premium support: Yes
    • Technology: MDB Angular
    • MDB Version: MDB5 7.1.0
    • Device: no
    • Browser: chroome
    • OS: windows
    • Provided sample code: No
    • Provided link: No
    Tags
    not-working
    About author
    sistemiUCSC
    0Support score
    2Questions 10Answers 1Snippets