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',
});
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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