Search not working for select in modal.


Topic: Search not working for select in modal.

anilwhiz pro premium asked 2 years 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 2 years 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 pro premium commented 2 years 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.


anilwhiz pro premium answered 2 years 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.


r.seifert answered 2 years 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 pro premium commented 2 years 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


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
  • User: Pro
  • 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
Tags