[FEATURE] Show noEntriesFoundLabel with an empty/none mat-option

[melroy89]

Is your feature request related to a problem? Please describe.

I added a "None" option (<mat-option>None</mat-option>), so users can select null/empty, whenever a select is not required (and if the user want to select nothing). So far so good.

However, this Angular component should ignore this specific mat-option since this option has no value attribute assign to it and therefor if no results are found the component should display the noEntriesFoundLabel text eg. "No matching ledger found" in my example.

Describe the solution you'd like

This Angular component should ignore the empty mat-option (mat-option without any value) and then still show me: "No search results" or "No matching ledger found" when the search did indeed return an empty array. Basically keep the noEntriesFoundLabel functionality working as expected.

Describe alternatives you've considered

I can't think of any, I follow the official Angular implementation to set a None option: https://material.angular.io/components/select/overview#form-field-features

Additional context

Due to the fact I have <mat-option>--</mat-option>, it will never show me the noEntriesFoundLabel text :(

<mat-select formControlName="transaction_ledger_id" placeholder="Ledger" width="100%">
  <mat-option>
    <ngx-mat-select-search formControlName="transaction_ledger_id_filter"
      placeholderLabel="Search..."
      noEntriesFoundLabel="No matching ledger found"
      [searching]="searching"></ngx-mat-select-search>
  </mat-option>
  <mat-option>--</mat-option>
  <mat-option *ngFor="let ledger of ledgers | async" [value]="ledger.ledger_id">
    {{ledger.ledger_number}} - {{ledger.ledger_description}}
  </mat-option>
</mat-select>`

And yes, I do want an empty mat-option in my drop-down.

Ideally, this None option should despite being at the top not be the default option when pressing "Enter" after a search.

[macjohnny]

@melroy89 do you want to introduce a new @Input and use it here?

ngx-mat-select-search/src/app/mat-select-search/mat-select-search.component.ts

Line 596 in da14301

return 1;

[melroy89]

I would like the code to be changed it knows I added an empty option (an option without value) and skip this option by default during search.

Allowing the user to still select the empty option, but at the same time have a working mat search drop down.

[macjohnny]

@melroy89 yes i think thats what you can achieve by adding an @Input() additionalOptionOffset = 0; and using it in

ngx-mat-select-search/src/app/mat-select-search/mat-select-search.component.ts

Line 596 in da14301

return 1;

i think thats safer than checking for options without values, as other users might have this setup for different scenarios.

you can send a PR if you want

[melroy89]

AH see, yes maybe that is correct way of implementing.. Ideally I would like to have it automated, but OK we could also introduce an additional additionalOptionOffset setting.