Topic: mdb-select (1&2) options in Dynamic Modal bug

akrolis pro asked 2 years ago


Expected behavior

Either mdb-select or mdb-select-2 to render the options when placed inside a dynamic modal

Actual behavior

The options are not visible in the dynamic modal.

Resources (screenshots, code snippets etc.)

html:

        <div class="modal-header">
      <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
        <span aria-hidden="true">×</span>
      </button>
      <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
    </div>
    <div class="modal-body">
      <div class="row">
        <div class="col-md-6">
          <div class="md-form">
            <mdb-select-2 placeholder="Choose your option" label="Example label">
              <mdb-select-option *ngFor="let option of options" [value]="option.value">{{ option.label }}</mdb-select-option>
            </mdb-select-2>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <mdb-select [options]="optionsSelect" placeholder="Choose your option"></mdb-select>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close" (click)="modalRef.hide()" mdbWavesEffect>Close</button>
      <button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>Save!</button>
    </div>

.ts:

 options = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' },
];
optionsSelect = [
  { value: '1', label: 'Option 1' },
  { value: '2', label: 'Option 2' },
  { value: '3', label: 'Option 3' },
  ];
 constructor(public modalRef: MDBModalRef) {}

Opening the modal:

          modalRef: MDBModalRef | null = null;

        constructor(private modalService: MDBModalService) {}

        openModal() {
          this.modalRef = this.modalService.show(ModalComponent)
        }

Arkadiusz Idzikowski staff commented 2 years ago

@akrolis I was unable to recreate such problems on our end. Do you use the latest (13.0.0) version? Are there any errors in the console when you try to open the components?



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB4 13.0.0
  • Device: Windows
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No