search

scania-digital-design-system / tegel

Tegel Design System
https://tegel.scania.com
MIT License
17 stars 13 forks source link

[Bug report]: Console errors after using tds-table in our pages #675

Closed sapostol closed 1 week ago

sapostol commented 3 months ago

Requirements before reporting

Package versions

"@scania/tegel-react": "1.11.0"

Browser

Chrome

Framework

React

Version

React 18.2.0

Reproduction steps

Added a TdsTable component Loaded the page which contains this table Opened console Saw 2 new errors:

- TypeError: Cannot read properties of null (reading 'tableId') at TdsTableBodyRow.connectedCallback (tds-table-body-row.entry.js:38:1)
 - TypeError: Cannot read properties of null (reading 'multiselect') at tds-table-body-row.entry.js:42:1

Code example

    <TdsTable tableId='filter-table' noMinWidth responsive expandableRows ref={filterTableRef}>
        <TdsTableToolbar onTdsFilter={(event: any) => setTableFilter(event.detail.query)} filter />
        <TdsTableHeader>
          <TdsHeaderCell cellKey='displayName' cellValue={t('Namn')} />
          <TdsHeaderCell cellKey='description' cellValue={t('Beskrivning')} />
        </TdsTableHeader>
        <TdsTableBody>
          {filteredData.map((row, index) => (
            <TdsTableBodyRowExpandable key={row.id}>
              <TdsBodyCell cellKey='displayName'>{row.displayName}</TdsBodyCell>
              <TdsBodyCell cellKey='description'>{row.description}</TdsBodyCell>
                   <div slot='expand-row'>some content component</div>
               </TdsBodyCell>
           </TdsTableBodyRowExpandable>
          )}
       </TdsTableBody>
   </TdsTable>

Screenshots

image

Expected behaviour

We should not see any console errors in a page in which the TdsTable component is loaded.

Console errors

Contact information

simona.apostol@scania.com

ckrook commented 1 week ago

Hi @sapostol! I have not been able to reproduce this issue.

The console errors you're encountering are likely due to how you're using useEffect in your code. It seems the TdsTableBodyRow components are trying to access properties like tableId and multiselect before the parent TdsTable is fully initialized. This timing issue is probably not related to the design system itself but rather to the component lifecycle in your implementation.