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

Excel style filtering for strings throws errors in the console #15113

Open
ilijev07 opened this issue Nov 27, 2024 · 0 comments · May be fixed by #15194
Open

Excel style filtering for strings throws errors in the console #15113

ilijev07 opened this issue Nov 27, 2024 · 0 comments · May be fixed by #15194
Assignees
Labels
🐛 bug Any issue that describes a bug ✅ status: resolved Applies to issues that have pending PRs resolving them, or PRs that have already merged.

Comments

@ilijev07
Copy link

Description

Excel style filtering for strings throws errors in the console when there are value in the grid which have just one letter or number.

Its introduced from this changes -> #14906

  • igniteui-angular version: 17.2.25
  • browser: Chrome Version 131.0.6778.86

Steps to reproduce

Here is Stackblitz link -> https://stackblitz.com/edit/e7anky?file=src%2Fapp%2Fdata%2FnwindData.ts,src%2Fapp%2Fdirectives%2Fprevent-scroll.directive.ts

  1. Have data in the grid with string type of column and enter data values with just 1 letter or 1 number
  2. Try filtering withTextFilter and filter with any of (startsWith, endsWith, equals, does not equal)
  3. Enter the letter or the number and press Apply (for example in the Product Names column, there are such entries: "2", "3" and "s" use any of those and observe the console)

Result

Even though the filtering works it throws error in the console
Screenshot 2024-11-27 133521

Expected result

No errors in the console

Note

I explored the codebase, the issue is in excel-style-filtering.component.ts in the renderValues and modifyExpression methods

 private renderValues() {
        this.filterValues = this.generateFilterValues();
        this.generateListData();
        this.expressionsList.forEach(expr => {
            if (this.column.dataType === GridColumnDataType.String && this.column.filteringIgnoreCase && expr.expression.searchVal) {
                this.modifyExpression(expr);
            }
        });
    }
    
     private modifyExpression(expr: ExpressionUI) {
        const lowerCaseFilterValues = new Set(Array.from(expr.expression.searchVal).map((value: string) => value.toLowerCase()));

        this.grid.data.forEach(item => {
            if (lowerCaseFilterValues.has(item[this.column.field]?.toLowerCase())) {
                expr.expression.searchVal.add(item[this.column.field]);
            }
        });
    }

the modifyExpression method tries to add in searchVal a value, but a searchVal is a string. I assume the if statement of renderValues should cover this scenario.

@ilijev07 ilijev07 added 🐛 bug Any issue that describes a bug 🆕 status: new labels Nov 27, 2024
@MonikaKirkova MonikaKirkova added 🛠️ status: in-development Issues and PRs with active development on them and removed 🆕 status: new labels Jan 2, 2025
@MonikaKirkova MonikaKirkova added ✅ status: resolved Applies to issues that have pending PRs resolving them, or PRs that have already merged. and removed 🛠️ status: in-development Issues and PRs with active development on them labels Jan 2, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 bug Any issue that describes a bug ✅ status: resolved Applies to issues that have pending PRs resolving them, or PRs that have already merged.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants