Error thrown by ResizeObserver

[hanastasov]

• igniteui-angular version: master
  *** browser:**

-- Chrome 113.0.5672.92 - reproduce
-- Edge 113.0.5672.92 - reproduce
-- Firefox 110.0.1 - does not reproduce

Steps to reproduce

1. Run dev demos, go to grid sample http://localhost:4200/grid

Result

[hanastasov]

Was reported in TaskPlanner app also, after upgrade to version 16, see IgniteUI/TaskPlanner#65 (comment)

[hanastasov]

Ok, seems to reproduce only on local build and not on production builds.

[ChronosSF]

Reopening as the issue is quite noticeable when trying to run, say the React Samples Browser. Samples such as:

• Groupby Summary Options
• Binding CRUD Data
• MRL

all throw on open.

@rkaraivanov suggested detaching the resizeobserver callback when doing the sizing calculations and attaching it back when that process completes.

[MayaKirova]

@tishko0 An easier way to reproduce in master is to attach to the window's error event, since the error no longer pops in a overlay. For example, for the dev demos:

1. Open the grid-auto-size.sample.ts sample and attach the window error event:

    public ngOnInit(): void {
        window.addEventListener("error", (e) => {
            console.log(e)
        });
...
}

2. Run the samples and open the related dev sample at: http://localhost:4200/gridAutoSize
3. Click the "Toggle Container Visibility" button twice to hide/show the container.
4. Open the console and observe the error and details:
   

PS: Probably will be fixed if the throttleTime used for both of the resize observers is limited to just the trailing emit (not the leading, since we want the last resize values), so with config { leading: false, trailing: true }. However this may require changes in some tests.