Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Selection clears if selected item is not visible in the list by default #3

Closed
rfuhrer opened this issue Mar 9, 2018 · 5 comments · Fixed by #25
Closed

Selection clears if selected item is not visible in the list by default #3

rfuhrer opened this issue Mar 9, 2018 · 5 comments · Fixed by #25
Labels
feature New feature or request help wanted Extra attention is needed

Comments

@rfuhrer
Copy link

rfuhrer commented Mar 9, 2018

I have a select search where I've got thousands of entries to choose from. To make the select render not die trying to show all of that, I changed my filter function to just return the top 10 results. This seems to break the select search. When you pick something outside of the default top 10 results it clears your selection shortly after closing the search list.

Here's an exaggerated example where I took your demo and cut the search results down to top 2: https://stackblitz.com/edit/github-ddlaqr
If you pick Bank A or B it works, but if you search for C and pick bank C, it clears the selection after you make it.

Is there maybe a better way of doing this? Or is there maybe a fix you can see that could be made to your library?

Thanks!

@macjohnny
Copy link
Member

hi @rfuhrer
the problem in this case is that ngx-mat-select-search will clear the search input field once the MatSelect options panel is closed, see https://github.com/bithost-gmbh/ngx-mat-select-search/blob/master/src/app/mat-select-search/mat-select-search.component.ts#L175
Since clearing the search input field resets the filtered list, which now does not contain your selected item anymore, the list of available options changes and triggers a re-initialization depending on the currently selected value and the current option list, see https://github.com/angular/material2/blob/master/src/lib/select/select.ts#L515
Now MatSelect detects that your selected value is not among the available options, so it will reset it.

In order to solve this, you need to ensure that your filtered items always contains the selected item.
One way to achieve this is to have an input in NgxMatSelectSearch that prevents clearing the search when closing. Would you like to give it a try and implement it together with an example?
You can directly try it in https://stackblitz.com/github/bithost-gmbh/ngx-mat-select-search

@macjohnny macjohnny added feature New feature or request help wanted Extra attention is needed labels Mar 9, 2018
@altschuler
Copy link

FWIW I'm adding the selected items to the top of the list. I think that makes for a relatively good user experience (easier to deselect one by one and easy to see whats selected with the pane open). This also solved the above although it's not a proper "solution".

@manuchadha1979
Copy link

manuchadha1979 commented Nov 21, 2020

Hi

I am on version 1.8.0

I tried to use as follows <ngx-mat-select-search [clearSearchInput]="false" formControlName="tagsFilterCtrl"></ngx-mat-select-search> but when I click outside the search box, the typed value is cleared if the search text doesn't exist in the select control.

I want a functionality in which a search item doesn't exist in the list then whatever the user typed is still available as value of the control and then I want to use that value to search on the server. I am doing this because I can't return all the values to the control at start up.

Have I understood that clearSearchInput is the value I need use to do this? Am I not using it incorrectly? If not, does the control support such a functionality?

UPDATE - I misunderstood the functionality. It clears (or not) the value entered in search box when the control goes out of focus. Is there a way that I can assign whatever is typed in the control as value of the control and then use that value to do a server side search? At the moment, while the value stays if clearSearchInput is false, the form control value stays empty and the Validators.required validation fails.

@macjohnny
Copy link
Member

@manuchadha1979 please open a new issue with an example.

@manuchadha1979
Copy link

manuchadha1979 commented Nov 21, 2020 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature New feature or request help wanted Extra attention is needed
Projects
None yet
4 participants