Text Highlight Directive: TypeError: can't access property "classList", el is undefined

[pmoleri]

Description

I use text highlight directive inside an igxFor virtualized list and I have a filter on it. When I use the filter everything works fine, but when I clear the filter it crashes.

• igniteui-angular version: 12.0.0
• browser: Firefox

Steps to reproduce

I don't currently have isolated it.

Result

Exception: TypeError: can't access property "classList", el is undefined

Attachments

[pmoleri]

I tried to isolate the issue, I couldn't get the exact same result but I got errors anyway. Use this stackblitz: https://stackblitz.com/edit/github-bwxvr8?

• Open the stackblitz console
• Search for "light20" --> you'll see some errors in the stackblitz console
• Press clear button in the search field --> some more errors

The highlight is inside a component that is rendered inside a virtualized igxFor.

[DiyanDimitrov]

@pmoleri. The text highlight expects that you will track an active highlight, but in your case I guess that you won't have an active highlight. I will make a change to skip the active highlight if the index is -1.

[pmoleri]

I will make a change to skip the active highlight if the index is -1.

That's how I monkey patched it yersterday :)

function highlightBugFix() {
    // Fix bug https://github.com/IgniteUI/igniteui-angular/issues/10002
    const highlight = IgxTextHighlightDirective.prototype as any;
    if (highlight && highlight.activate) {
        const activateOriginal: (index: number) => void = highlight.activate;

        highlight.activate = function(index: number) {
            if (index === -1) {
                // When activating nothing remove the highlight element, otherwise activate fails
                this.deactivate();
                this.clearHighlight(false);
            }

            activateOriginal.call(this, index);
        };
    }
}

[pmoleri]

I don't know exactly how IgxFor directive works, but it seems to me that at some point the component instances are still alive, but the DOM elements are not there and that's when the highlight fails. The highlight didn't fail with a regular ngFor.

[DiyanDimitrov]

I am also not sure why it works with regular ngFor, but this issue is definitely reproducible with a simple highlight if no active highlight is set.