[MultiColumnComboBox] ResizeObserver loop completed with undelivered notifications.

[n/a]

Components are onrganized in simple hierarchical structure like this below

<Window>
<Grid>
       <GridColumn 
           cell= {props => <MultiColumnComboBox />}        


     ></GridColumn>
</Grid>
<Window>

  

     

     

 

When one row which means one multicolumncombobox exists inside <Grid>, No problem,

But, When two rows which mean two multicolumncombbox exist, An Error has happend.

"ResizeObserver loop completed with undelivered notifications."

 

 

my package.json  is

"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@microsoft/signalr": "^6.0.3",
"@mui/icons-material": "^5.11.9",
"@mui/material": "^5.6.4",
"@progress/kendo-data-query": "^1.5.5",
"@progress/kendo-drawing": "^1.17.2",
"@progress/kendo-file-saver": "^1.1.1",
"@progress/kendo-licensing": "^1.2.1",
"@progress/kendo-react-animation": "^5.9.0",
"@progress/kendo-react-buttons": "^5.18.0",
"@progress/kendo-react-charts": "^5.18.0",
"@progress/kendo-react-common": "5.18.0",
"@progress/kendo-react-data-tools": "^5.18.0",
"@progress/kendo-react-dateinputs": "^5.18.0",
"@progress/kendo-react-dialogs": "^5.18.0",
"@progress/kendo-react-dropdowns": "^5.18.0",
"@progress/kendo-react-form": "^5.18.0",
"@progress/kendo-react-grid": "^5.18.0",
"@progress/kendo-react-indicators": "^5.18.0",
"@progress/kendo-react-inputs": "^5.18.0",
"@progress/kendo-react-intl": "^5.18.0",
"@progress/kendo-react-labels": "^5.18.0",
"@progress/kendo-react-layout": "^5.18.0",
"@progress/kendo-react-listbox": "^5.18.0",
"@progress/kendo-react-listview": "^5.18.0",
"@progress/kendo-react-notification": "^5.18.0",
"@progress/kendo-react-pdf": "^5.18.0",
"@progress/kendo-react-popup": "^5.18.0",
"@progress/kendo-react-progressbars": "^5.18.0",
"@progress/kendo-react-scrollview": "^5.18.0",
"@progress/kendo-react-spreadsheet": "^5.18.0",
"@progress/kendo-react-tooltip": "^5.18.0",
"@progress/kendo-react-treeview": "^5.18.0",
"@progress/kendo-react-upload": "^5.18.0",
"@progress/kendo-svg-icons": "^1.9.0",
"@progress/kendo-theme-default": "^6.7.0",
"@testing-library/jest-dom": "^6.1.3",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.5.0",
"calculate-size": "^1.1.1",
"cldr": "^7.2.0",
"cldr-core": "^41.0.0",
"cldr-dates-full": "^41.0.0",
"cldr-numbers-full": "^41.0.0",
"dotenv": "^16.0.0",
"dragselect": "^2.3.0",
"hammerjs": "^2.0.8",
"mobx": "^6.6.1",
"mobx-react": "^7.5.2",
"monaco-editor": "^0.32.1",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-error-boundary": "^3.1.4",
"react-intersection-observer": "^9.4.3",
"react-router": "^5.3.4",
"react-router-dom": "^5.3.4",
"react-scripts": "^5.0.1",
"react-simple-image-viewer": "^1.2.2",
"react-to-print": "^2.14.7",
"typescript": "^4.5.5",
"web-vitals": "^2.1.3"

 

 

And error image is.

 

Please. help me.

[Konstantin Dikov]

Hi,

I have tried the structure that you have shared in the following example, but I was not able to reproduce the error in question:

• https://stackblitz.com/edit/react-a1ehps?file=app%2Fmain.jsx

If the issue on your side persists, please share a stackblitz example replicating the error, so we can test and debug it locally.

As a side note, please have in mind that custom cells should not be inline functions and you need to set only the name of the custom component that will be defined outside of the main component:

<Column cell={MultiComboCell} />

Having inline functions as custom cells will force React to re-mount the entire component on each change in the state.

 

Regards,
Konstantin Dikov
Progress Telerik

[n/a]

1.  cannot repoduce => ummh... other case? like  version.  my all versions are "5.18.0" but you are using "6.0.3"

    the other case is rendering problem, i'm using mobx state library.

    My application is large sized web application. So I need to test the application by removing other library and code in order

   Anyway,  I never use "ResizeObserver" in my application. 

    Lastly, I have a question.     "Is ResizeObserver  not used  in MultiColumnComboBox component or Window Component or GridComponent? " 

 

2. Inline function - > I'm building Low Code(LC) Web Application. 

                                    all options are dynamic, not static. I have no choice but to use inline function. haha.

                                  Managing state is very hard.... 

[Konstantin Dikov]

Hi Da,

I have tested the same example with version 5.18.0 of the components, but I was still not able to reproduce the error in question.

As for the error in question, you can take a look at the following forum thread and see if any of the suggestions will resolve the error in your project:

• https://stackoverflow.com/questions/76187282/react-resizeobserver-loop-completed-with-undelivered-notifications

For the inline functions, please note that the functionality of the Grid will break with them, so you must use the approach that I have shared. You can achieve the same with dynamic options and using React Context for passing any references from the main component to the custom cells.