Topic: Select with search inside a modal is not working

anilwhiz premium asked 1 year ago


Expected behavior

Search functionality in the modal should be working.

Actual behavior

The search box (filter) of the mdb-select is not working in the modal, please check this screen recording of this issue https://www.loom.com/share/5a80f056e8864c2b882c224c9ea5780f

Also, you guys have provided the sample code in all supported languages for Select with search inside a modal but not for Angular, and so please share a sample code for that too.

Resources (screenshots, code snippets etc.)

<div class="modal fade" id="selectOptionPopup">
<div class="modal-dialog modal-lg data-item-modal">
    <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
            <h4 class="modal-title">Edit Option</h4>
        </div>
        <!-- Modal body -->
        <div class="modal-body">
            <div  class="showSelect-Dropdown">
                <mdb-form-control>
                  <mdb-select [filter]="true">
                    <mdb-option *ngFor="let option of options" [value]="option.value">
                        {{option.label}}
                    </mdb-option>
                  </mdb-select>
                  <label mdbLabel class="form-label">Test label</label>
                </mdb-form-control>
            </div>
        </div>
    </div>
</div>

Rafał Seifert free answered 1 year ago


It looks like you are using sample modal code from MDB Standard. In Angular you don't need to create those two divs at the top:

<div class="modal fade" id="selectOptionPopup">
<div class="modal-dialog modal-lg data-item-modal">

Please try such structure:

<div class="modal-content" id="selectOptionPopup">
  <div class="modal-header">
    <h4 class="modal-title">Edit Option</h4>
  </div>
  <div class="modal-body">
    <div class="showSelect-Dropdown">
      <mdb-form-control>
        <mdb-select [filter]="true">
          <mdb-option *ngFor="let option of options" [value]="option.value">
            {{ option.label }}
          </mdb-option>
        </mdb-select>
        <label mdbLabel class="form-label">Test label</label>
      </mdb-form-control>
    </div>
  </div>
</div>

If you want to add .modal-lg class to modal you do it by adding an options object with modalClass property into your openModal method like this:

  openModal() {
    this.modalRef = this.modalService.open(ModalComponent, {
      modalClass: 'modal-lg',
    });
  }

If data-item-modal class is important for you and it provides some styling you can add it also via modalClass option

  openModal() {
    this.modalRef = this.modalService.open(ModalComponent, {
      modalClass: 'modal-lg data-item-modal',
    });
  }


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: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 4.1.0
  • Device: All
  • Browser: All Browser
  • OS: All
  • Provided sample code: No
  • Provided link: Yes