1. Feedback
  2. Angular
  3. 57943

Welcome to the Angular feedback portal. We’re happy you’re here! If you have feedback on how to improve the Angular, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

If you have a cell template that contains a table, clicking on the cell doesn't focus it

If you have a cell template that contains a table, then clicking on any cell in that column does not set the focus on that cell. This is especially a problem if there isn't a cell within the table that already has focus, as if you press Tab or Shift-Tab on the keyboard at this point it will throw an exception:

TypeError: Cannot read properties of undefined (reading 'lastIndexOf')

    at ContentFocus.jump (focus-strategy.js:1339:59)

    at FocusStrategy.onKeyPress (focus-strategy.js:364:42)

    at Observer.notify (observer.js:101:29)

    at Component.notify (component.js:306:32)

    at Grid.keyActionHandler [as originalKeyActionHandler] (grid.js:5199:18)

    at gridPrototype.keyActionHandler (main.ts:63:10)

    at KeyboardEvents._this.keyPressHandler (keyboard.js:115:35)

    at _ZoneDelegate.invokeTask (zone.js:402:31)

    at async-stack-tagging.ts:44:49

    at AsyncStackTaggingZoneSpec.onInvokeTask (async-stack-tagging.ts:44:30)


After it throws the exception, the browser handles the tab navigation as it normally would, which bypasses focusing any of the table cells themselves.


If a cell already had focus (e.g., from previous keyboard navigation or by clicking on a cell that doesn't contain a table), then pressing Tab or Shift-Tab doesn't throw an exception, but it navigates from the previously focused cell, not from the cell that was just clicked on, which isn't expected.

Here is a simple template that can be used to reproduce this:

        <e-column field="maxAmount" width="100" headerText="Max Amt">
            <ng-template #template let-data>
                <table class="sub-grid">
                    <tbody>
                        <tr>
                            <td [title]="data.maxAmount">
                                {{data.maxAmount}}
                            </td>
                        </tr>
                        <tr>
                            <td [title]="data.maxAmount * data.foodItem.formulaYield">
                                {{data.maxAmount * data.foodItem.formulaYield}}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </ng-template>
        </e-column>