mdb-select-2 Problems in the list opening position

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: mdb-select-2 Problems in the list opening position

Wanderson pro asked 11 months ago

Expected behavior When selecting a certain item in the selection box and when opening it again to select another item, the box must bring the previously selected item visible Actual behavior When selecting a certain item in the selection box and opening it again to select another item, the box always moves to the end, which greatly hinders usability. Resources (screenshots, code snippets etc.) enter image description here enter image description here enter image description here

Arkadiusz Idzikowski staff commented 11 months ago

I tried to reproduce this bug on my end but it looks like everything is working as expected.

Could you please edit your post and provide an example HTML/TS code on which I will be able to reproduce the problem?

Wanderson pro commented 11 months ago

The component has problems when changing the optionHeight property.

In my case it is set to 35.

<div class="md-form md-outline">
  <mdb-select-2 [outline]="true" placeholder="Choose your option" label="Example label" optionHeight="35">
    <mdb-select-filter [ngModel]="searchText | async" (ngModelChange)="searchText.next($event)">
    </mdb-select-filter>
    <mdb-select-option *ngFor="let option of filteredOptions | async" [value]="option.value">{{ option.label }}
    </mdb-select-option>
  </mdb-select-2>
</div>

Wanderson pro commented 11 months ago

The mdb-auto-completer component has the same problem.

Arkadiusz Idzikowski staff answered 11 months ago

Please try to change the optionHeight syntax to [optionHeight]="35". It looks like there is a problem with automatic type coercion from string to number.

Wanderson pro commented 11 months ago

It worked, thank you
Write
Create snippet
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: No
  • Technology: MDB Angular
  • MDB Version: MDB4 15.0.0
  • Device: ALL
  • Browser: ALL
  • OS: ALL
  • Provided sample code: No
  • Provided link: No
Tags
mdb-select-2
Related topics
1
MDB Select 2 not working
1
mdb-select-2 with prefix icon
0
mdb-select-2 label with thml
0
mdb-select (1&2) options in Dynamic Modal bug
0
mdb-select-2
About author
Wanderson
Pro User
60Support score
15Questions 2Answers
0Snippets likes 0Snippets