MDB-SELECT-2 bugs

Topic: MDB-SELECT-2 bugs

Karman40 pro premium priority asked 4 years ago

I found some bugs with the new mdb-select.

bugs:

- Design - select taller then other inputs, label font weight bolder then others, when validate select, label color is red or green, but other input label is grey always.code fix:

 // NEW MDB SELECT BUGS .mdb-select-outline .mdb-select-placeholder, .mdb-select-outline .mdb-select-value-label { padding-left: 0!important; } .mdb-select-outline .mdb-select-value { padding: 6px 12px; width: auto; } mdb-select-2 label:not(:focus) { top: -3px!important; } mdb-select-2 label.active { top: 0!important; }  enter image description here

- Reset: i want to reset the select. this.form.reset(). The validator will be reset successfully, but its value will be, but it will nevertheless show that the previous value is selected. but select.value is null.

Before reset:

enter image description here

After reset:

enter image description here

Gitlab link: https://git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard/issues/91

If i use own search, end one select end i want to change value in filter, after press space selected current value, end not put space.

    <div class="md-form">
      <mdb-select-2 [outline]="true" [optionHeight]="38" [label]="event.type !== 'relay' ? 'Coose competitor' : 'Relay first competitor'" mdbValidate formControlName="competitor1">
        <ais-instantsearch [config]="competitor1.algoliaConfig">
          <ais-configure [searchParameters]="competitor1.searchParameters"></ais-configure>

          <app-ai-mdb-search-input-to-select></app-ai-mdb-search-input-to-select>

          <ais-hits>
            <ng-template let-hits="hits" let-results="results">
              <mdb-select-option *ngFor="let competitor of hits; let i = index" [value]="competitor">
                <app-age-groups-entry-new-competitor-select-template [competitor]="competitor" [teamName]="returnTeamShortName(competitor.tid)"></app-age-groups-entry-new-competitor-select-template>
              </mdb-select-option>
            </ng-template>
          </ais-hits>

          <ais-hits-per-page style="display: none;" [items]="[{ label: '10 hits per page', value: 10, default: true }]"></ais-hits-per-page>
        </ais-instantsearch>
      </mdb-select-2>
      <mdb-error *ngIf="competitor1Input.invalid && (competitor1Input.dirty || competitor1Input.touched)">
        <ng-container *ngIf="competitor1Input.errors.required">{{ messages.required }}</ng-container>
      </mdb-error>
      <mdb-success *ngIf="competitor1Input.valid && (competitor1Input.dirty || competitor1Input.touched)">{{ messages.success }}</mdb-success>
    </div>

My custom filter spinnet: https://gitlab.infohullam.hu/snippets/12

Gitlab link (with code snippet): https://git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard/issues/91

Arkadiusz Idzikowski staff commented 4 years ago

Thank you, we plan to add a fix release in the near feature and we will include fixes for those problems.