mdb-select inside dropdown issue

Topic: mdb-select inside dropdown issue

noveltytech priority asked 3 years ago

Expected behavior Dropdown should not close when select option is selected Actual behavior dropdown is closed with select option is selected Resources (screenshots, code snippets etc.)

<div mdbDropdown class="dropdown">
  <button type="button" class="btn btn-light btn-floating dropdown-toggle me-2 flex-shrink-0" mdbDropdownToggle>
    <i-bs name="funnel" width="1.25rem" height="1.25rem"></i-bs>
  </button>
  <div mdbDropdownMenu class="dropdown-menu dropdown-menu-start">
    <form class="p-3">
      <div class="row g-2 mb-2">
        <label for="colFormLabel" class="col-sm-5 col-form-label pb-0 pt-0">Provider</label>
        <div class="col-sm-7">
          <mdb-form-control>
            <mdb-select class="select-sm">
              <mdb-option>Option 1</mdb-option>
              <mdb-option>Option 2</mdb-option>
              <mdb-option>Option 3</mdb-option>
            </mdb-select>
          </mdb-form-control>
        </div>
      </div>
      <div class="dropdown-divider"></div>
      <div class="d-flex justify-content-between">
        <button type="submit" class="btn btn-sm btn-light me-2">Clear filter</button>
        <!-- Submit button -->
        <button type="submit" class="btn btn-sm btn-primary">Apply Filter</button>
      </div>
    </form>
  </div>
</div>

Add comment

Arkadiusz Idzikowski staff answered 3 years ago

0 0 Best answer

Please insert min. 20 characters.

In this case, a select dropdown is opened inside an overlay (separate container moved at the end bo the document body), and every click detected in the select menu will be handled like a document click by dropdown. We will check if we can somehow fix that on our end, but it can be difficult as there are many different use cases similar to the one you use.

You can use stopPropagation method on select options in order to resolve this problem on our end:

<mdb-option (click)="$event.stopPropagation()">Option 1</mdb-option>
<mdb-option (click)="$event.stopPropagation()">Option 2</mdb-option>
<mdb-option (click)="$event.stopPropagation()">Option 3</mdb-option>

Add comment

Write

Create snippet

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: Priority
Premium support: Yes
Technology: MDB Angular
MDB Version: MDB5 1.0.0
Device: mac
Browser: firefox
OS: big sur
Provided sample code: No
Provided link: No

noveltytech

149Support score
30Questions 4Answers 4Snippets