igx-grid - column field named "expression" causes cell editing to behave incorrectly

[mrentmeister-tt]

Description

I am working on building a custom rule editor for the Microsoft Rules Engine using igniteui grids. I stumbled upon an unwanted behavior as I started building the grid to edit rules. Whenever there is an igx-column defined in an igx-grid with field="expression", it causes tabbing while in cell edit mode to not behave correctly.

Here is the data model I'm using:

export type Rule = {
  id: string;
  /** The name of the rule. */
  ruleName: string;
  operator: RuleOperator | null;
  errorMessage?: string;
  enabled: boolean;
  ruleExpressionType?: RuleExpressionType;
  workflowsToInject?: string[];
  rules: Rule[];
  localParams?: ScopedParam[];
  expression?: string;
  actions?: RuleActions;
  successEvent?: string;

  /** The custom properties or tags of the rule. */
  properties?: Record<string, any>;
};

Here is the igx-grid I'm defining in my html template"

<igx-grid
  [data]="rules"
  [addRowEmptyTemplate]="addRowEmptyTemplate"
>
  <igx-column
    field="ruleName"
    header="Name"
    i18n-header="@@name"
    [editable]="true"
    [resizable]="true"
    width="200px"
  ></igx-column>
  <igx-column
    field="expression"
    header="Expression"
    i18n-header="@@expression"
    [resizable]="true"
    [editable]="true"
    minWidth="300px"
  ></igx-column>
  <igx-column
    field="operator"
    header="Operator"
    i18n-header="@@operator"
    [editable]="true"
    [resizable]="true"
    width="125px"
  ></igx-column>
  <igx-column
    field="successEvent"
    header="Success event"
    i18n-header="@@successEvent"
    [resizable]="true"
    [editable]="true"
    width="125px"
  ></igx-column>
  <igx-column
    field="errorMessage"
    header="Error"
    i18n-header="@@error"
    [resizable]="true"
    [editable]="true"
    width="150px"
  ></igx-column>
  <igx-column
    field="enabled"
    header="Enabled"
    i18n-header="@@enabled"
    [resizable]="true"
    [editable]="true"
    width="125px"
    dataType="boolean"
  ></igx-column>
</igx-grid>

here's some seed data that I'm using in my component:

rules: Rule[] = [
  {
    id: '1',
    ruleName: 'Percent10',
    successEvent: '10',
    expression: 'input1.country == "US" AND input1.amount > 100 AND input2.totalOrders > 1',
    operator: null,
    enabled: true,
    ruleExpressionType: RuleExpressionType.Lambda,
    rules: []
  },
  {
    id: '2',
    ruleName: 'Percent20',
    successEvent: '20',
    expression: 'input1.country == "US" AND input1.amount > 200 AND input2.totalOrders > 2',
    operator: null,
    enabled: true,
    ruleExpressionType: RuleExpressionType.Lambda,
    rules: []
  },
  {
    id: '3',
    ruleName: 'Percent30Nested',
    successEvent: '30',
    operator: null,
    enabled: true,
    ruleExpressionType: RuleExpressionType.Lambda,
    rules: [
      {
        id: '4',
        ruleName: 'IsLoyal',
        expression: 'input1.loyaltyFactor > 3 AND input2.totalOrders > 5',
        operator: null,
        enabled: true,
        ruleExpressionType: RuleExpressionType.Lambda,
        rules: []
      },
      {
        id: '5',
        ruleName: 'HasHighOrderCount',
        expression: 'input2.totalOrders > 10',
        operator: null,
        enabled: true,
        ruleExpressionType: RuleExpressionType.Lambda,
        rules: []
      },
    ]
  }
]

• igniteui-angular version: 18.2.12
• browser: Edge

Steps to reproduce

1. Create an igx-grid, like in the code above, bound to the provided seed data
2. Run the application and start editing r1c1
3. Hit tab to start editing the next cell

Result

Observe that r1c2 does not gain the focus. Instead it's the last row, column 1

Expected result

r1c2 should be in edit mode

Why it's happening

I was digging into the code for IgxGridBaseDirective.getNextCell and I can see that rows that have an expression property on the object are filtered out.

Recommendation

Introduce a JavaScript Symbol for the key properties on objects that IgniteUi uses, so that users can still have properties on their objects like expression, summaries, etc that won't conflict with the key values you're looking for.

Example:

const EXPRESSION = Symbol('expression');
const SUMMARIES = Symbol('summaries');
const CHILD_GRIDS_DATA = Symbol('childGridsData');
const DETAILS_DATA = Symbol('detailsData')

if (this.dataView.slice(dataViewIndex, dataViewIndex + 1)
  .find(rec => !rec[EXPRESSION] && !rec[SUMMARIES] && !rec[CHILD_GRIDS_DATA] && !rec[DETAILS_DATA]) && nextCellIndex !== undefined) {
  return { rowIndex: currRowIndex, visibleColumnIndex: nextCellIndex };
}

Attachments

IgniteUi.Tabbing.mp4