I get this error "ResizeObserver loop completed with undelivered notifications" when I set width and height 100% in Angular about uppy HOT 5 CLOSED

I can't reproduce it in vanilla/plain-js Uppy, dynamically setting width: '100%', height: '100%' for Dashboard works just fine:

document.getElementById('myButton').addEventListener('click', () => {
    uppy.getPlugin('Dashboard').setOptions({ width: '100%', height: '100%' });
});

I am updating properties on onInit and onChanges, like this

Could you please recreate your issue in
https://github.com/transloadit/uppy/blob/main/examples/angular-example/src/app/app.component.ts

Setup instructions are here https://github.com/transloadit/uppy/tree/main/examples/angular-example.

from uppy.

Couldn't run locally Angular example based on above links, I get errors during build, but I tried two other versions on my uppy project 3.24.0 and 3.25.0, but I get the same error "ResizeObserver loop completed with undelivered notifications".

from uppy.

Alright, then please change the following code in a way that creates the error in your project:

https://github.com/transloadit/uppy/blob/main/examples/angular-example/src/app/app.component.ts

I will compile it myself locally, and hopefully that gives me the "ResizeObserver loop completed with undelivered notifications" error. Would be helpful to see exactly what you're doing onInit and onChanges.

from uppy.

I've updated the code:

export class AppComponent implements OnInit {
  title = 'angular-example'

  showInline = false

  showModal = false

  dashboardProps = {}

  dashboardModalProps = {
    target: document.body,
    onRequestCloseModal: (): void => {
      this.showModal = false
    },
  }

  uppy = new Uppy({ debug: true, autoProceed: true })

  ngOnInit(): void {
    this.uppy
      .use(Webcam)
      .use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })
      .use(GoogleDrive, { companionUrl: 'https://companion.uppy.io' })
    
    this.pushDashboardOptions();
  }

  pushDashboardOptions() {
    this.dashboardProps = {
      width: '100%',
      height: '100%',
      hideUploadButton: false,
      proudlyDisplayPoweredByUppy: false,
      disableStatusBar: false,
      inline: true,
      closeAfterFinish: false,
      plugins: ['Webcam']
    }
  }
}

from uppy.

Couldn't run locally Angular example based on above links, I get errors during build

Tried our angular example on a new repo clone - it builds without errors for me. Maybe enabling corepack like mentioned in Contributing.md would make it work for you.

I've updated the code

Ran this code on a new build. In Firefox, it runs without the ResizeObserver loop completed with undelivered notifications error. The width does get set to 100%:

I'm running Uppy 4.x (current main branch in Uppy) - maybe this issue was fixed in the 4.x version.
Also - you mentioned .onChanges - maybe that's where this error is stemming from for you. To ascertain that, I would need a full app.component.ts example recreating this issue from you.

Closing this ussue for now - please reopen if you manage to recreate this issue on current main in app.component.ts.

from uppy.