JQuery Error on oj-table since JET 13 Upgrade

CoreyS

Hello,

I recently upgraded an app from JET 12 to JET 13. Since the upgrade we are getting the below exception in the console log. This is from an oj-table, utilizing a template with embedded oj-led-gauge component. The thresholds calculation on the oj-led-gauge seems to not be working properly as a result of this exception in the console.

ojtable.js:17322 

    Uncaught (in promise) RangeError: Maximum call stack size exceeded

  at Table._getScrollCoordinates (ojtable.js:17322:52)

  at $.<computed>.<computed>._getScrollCoordinates (widget.js:132:25)

  at Table._syncScrollPosition (ojtable.js:17099:22)

  at $.<computed>.<computed>._syncScrollPosition (widget.js:132:25)

  at Table._syncScrollPosition (ojtable.js:17143:23)

  at $.<computed>.<computed>._syncScrollPosition (widget.js:132:25)

  at Table._syncScrollPosition (ojtable.js:17143:23)

  at $.<computed>.<computed>._syncScrollPosition (widget.js:132:25)

  at Table._syncScrollPosition (ojtable.js:17143:23)

  at $.<computed>.<computed>._syncScrollPosition (widget.js:132:25)

John 'JB' Brock-Oracle

Please share your HTML that defines the oj-table and the template.

CoreyS

See below - let me know if any other snippets of code will be helpful. Thanks!

<oj-form-layout direction="row" max-columns="3" user-assistance-density="compact" class="sfi-full-width">

                <oj-table id="heatMapAobTableId"

                          data='[[heatMapAobDataProvider]]'

                          display='grid'

                          columns='{{heatMapAobColumns}}'

                          columns-default='{"sortable": "disabled"}'

                          style="max-height: 250px"

                          scroll-policy='loadMoreOnScroll'

                          selection-mode='{"row": "single"}'

                          scroll-policy-options='{"fetchSize": 5}'

                          on-first-selected-row-changed="[[resourceAobSelectionListener]]">

                    <template slot="allocationRemainingHoursTemplate" data-oj-as="cell">

                        <oj-led-gauge

                                      class="oj-sm-float-start"

                                      :title="[[(cell.data ? cell.data : 0)]]"

                                      value="[[cell.data ? cell.data: 0]]"

                                      marker-size="sm"

                                      thresholds="[[heatMapThresholds($context)]]"></oj-led-gauge>

                    </template>

                </oj-table>

                <oj-table id="heatMapTeamTableId"

                          data='[[heatMapTeamDataProvider]]'

                          display='grid'

                          columns='{{heatMapTeamColumns}}'

                          columns-default='{"sortable": "disabled"}'

                          style="max-height: 250px"

                          scroll-policy='loadMoreOnScroll'

                          selection-mode='{"row": "single"}'

                          scroll-policy-options='{"fetchSize": 5}'

                          on-first-selected-row-changed="[[resourceTeamSelectionListener]]">

                    <template slot="allocationRemainingHoursTemplate" data-oj-as="cell">

                        <oj-led-gauge

                                      class="oj-sm-float-start"

                                      :title="[[(cell.data ? cell.data : 0)]]"

                                      value="[[cell.data ? cell.data: 0]]"

                                      marker-size="sm"

                                      thresholds="[[heatMapThresholds($context)]]"></oj-led-gauge>

                    </template>

                </oj-table>

                <oj-table id="heatMapPartnerTableId"

                          data='[[heatMapPartnerDataProvider]]'

                          display='grid'

                          columns='{{heatMapPartnerColumns}}'

                          columns-default='{"sortable": "disabled"}'

                          style="max-height: 250px"

                          scroll-policy='loadMoreOnScroll'

                          selection-mode='{"row": "single"}'

                          scroll-policy-options='{"fetchSize": 5}'

                          on-first-selected-row-changed="[[resourcePartnerSelectionListener]]">

                    <template slot="allocationRemainingHoursTemplate" data-oj-as="cell">

                        <oj-led-gauge

                                      class="oj-sm-float-start"

                                      :title="[[(cell.data ? cell.data : 0)]]"

                                      value="[[cell.data ? cell.data: 0]]"

                                      marker-size="sm"

                                      thresholds="[[heatMapThresholds($context)]]"></oj-led-gauge>

                    </template>

                </oj-table>

            </oj-form-layout>

ZacD

Hey @John 'JB' Brock-Oracle,

I've been helping Corey with this internally as well. The error seems to occur often (but not always) on page load and pretty consistently on navigation away from the page. From what I can tell, it appears to be related to the fact that we are trying to fit three tables next to each other horizontally, and these tables all have horizontal scrollbars. If I reduce the number of columns so they fit in the space, the error goes away. If I remove the oj-form-layout (so the tables are stacked vertically) the error goes away. I've also tried switching to using a grid flex layout instead of the oj-form-layout, but I'm still seeing the errors there.

One other thing I noticed is that the error appears to be bubbling up from the one table that doesn't have enough rows to fill the full height. If I remove that table from the screen (comment out the HTML) the error stops occurring.

I've tried recreating this error elsewhere, but I have not had any luck yet. I tried in the cookbook as well as in a freshly scaffolded app, but neither of them were experiencing this with the simple example I tried.

When the error occurs, we get two slightly different stack traces in the console. I've included the full stack traces in the attached file, for reference.

localhost-1663947478836.log

Hopefully that provides you some useful information.

John 'JB' Brock-Oracle

Hi Zac and Corey,

Sorry for the delay on this. I'll take a look later today and see what I can come up with.