[mdc-data-table] Uncaught TypeError thrown when changing an input field column on a row

[jcwchriswalker]

Bug report

Uncaught TypeError thrown on mdc-data-table when a text input field is one of the columns and there is no row selection checkbox feature on the table

Steps to reproduce

1. Create a mdc-data-table without the row selection checkbox
2. Have one of the columns contain an input type=text field
3. When viewing the table, change one of the input text fields then tab out (generating a change event on the input element)
4. An uncaught error is thrown: Cannot read properties of undefined (reading '0') at Object.isCheckboxAtRowIndexChecked (component.js:232:45) at MDCDataTableFoundation.handleRowCheckboxChange (foundation.js:193:37) at HTMLTableSectionElement.handleRowCheckboxChange (component.js:81:30)

The (reading '0') refers to the row number this input text field was on.

Expected behavior

No error should be thrown.

Your Environment:

Software	Version(s)
MDC Web	14.0.0
Browser	Chrome 107
Operating System	Windows 10

Additional context

It seems that this statement on line 97 of components.ts is handeling all 'change' events in the table this.content.addEventListener('change', this.handleRowCheckboxChange); which eventually calls line 255 of components.ts isCheckboxAtRowIndexChecked: (rowIndex: number) => this.rowCheckboxList[rowIndex].checked,

Since there are no checkboxes, the error is thrown.

Possible solution

See if the event is actually for a row selection checkbox and if not, do nothing. Temporary workaround is to remove the listener which I did by:

        const grid = new MDCDataTable(this.container.querySelector('.mdc-data-table'));
        ((grid as any).content as HTMLElement).removeEventListener('change', (grid)as any).handleRowCheckboxChange);