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

options not filtered correctly when using ngOptionHighlight #1244

Closed
ronbiter opened this issue Jul 3, 2019 · 4 comments · Fixed by #1248
Closed

options not filtered correctly when using ngOptionHighlight #1244

ronbiter opened this issue Jul 3, 2019 · 4 comments · Fixed by #1248

Comments

@ronbiter
Copy link

ronbiter commented Jul 3, 2019

Please fill below information if issuing a bug report.

Expected behaviour

options in the dropdown should filter according to search term

Actual behaviour

the options are not filtered correctly (see your example page https://ng-select.github.io/ng-select#/forms the last example)

More Info

ng-select version: 2.20.3

browser: [INSERT BROWSER INFO HERE]

reproducible in demo page: YES
Capture

@LKU4
Copy link

LKU4 commented Jul 4, 2019

I spent some time this morning to find source of this problem and I believe the cause lies in new trackByFn for dropdown options:
0afa9c1

The list of options in dropdown is actually filtered correctly, and it is always cut down to correct number of options. You can even click a "wrong" option, and it turns out it's actually a correct one underneath. The only thing that doesn't work properly is displaying option labels in rendered HTML.

The current trackByOption looks like this:

trackByOption = (_: number, item: NgOption) => {
        if (this.trackByFn) {
            return this.trackByFn(item.value);
        }

        return null;
    };

If you do not supply your own trackByFn, it will return null for all options by default. I believe this means that Angular won't detect changes between swapped options and will see no need to re-render them, causing the problem. I think the default implementation should just return the whole item, so it can always compare object identity.

We can workaround this bug in current version by supplying our own trackByFn to ng-select component:

[trackByFn]="trackByFn"
trackByFn(item: any): any {
    return item;
}

Some other issues that I believe concern this bug:
#1181
#1218
#1229

@varnastadeus
Copy link
Member

@LKU4 you are right, it was a bad idea to return null by default

varnastadeus added a commit that referenced this issue Jul 4, 2019
use dropdownId with index as option htmlId

fixes #1244
fixes #1181
fixes #1218
fixes #1229
@spitfjre
Copy link

spitfjre commented Jul 9, 2019

This still does not work for me in v3.0.1. Only by providing own tackBy function.

@varnastadeus
Copy link
Member

it does work in demo page

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants