Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Search not working for select in modal.

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 I have updated my comment with code sample

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>


Arkadiusz Idzikowski staff commented 1 year ago

Could you please edit your post and provide some more information and an example code that is not working correctly? Are there any errors in the browser console when you open the modal?

I could not reproduce such a problem on our end (tested on version 4.1.0)


anilwhiz premium commented 1 year ago

Hi Arkadiusz,

Please check I have updated my comment with the code sample, let me know if you need any other details. This issue is a blocker for us, so please help us fix it asap.

Thank you in advance.


Rafał Seifert free answered 1 year ago


I've run into animation problem. It was logged in console. The solution was to import BrowserAnimationsModule.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'

Also please make sure to import MdbSelectModule

import { MdbSelectModule } from 'mdb-angular-ui-kit/select'


anilwhiz premium commented 1 year ago

Hello,

I am getting these errors in my console, and I have imported both the modules that you have suggested in my component and still, I have not able to use the filter functionality in the select dropdown inside Modal.

Check this screen recording: https://www.loom.com/share/5a80f056e8864c2b882c224c9ea5780f


anilwhiz premium answered 1 year ago


Hi Arkadiusz,

Please check I have updated my comment with the code sample, let me know if you need any other details. This issue is a blocker for us, so please help us fix it asap.

Thank you in advance.



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: Laptop
  • Browser: All
  • OS: Windows
  • Provided sample code: No
  • Provided link: No