v3 beta: "ResizeObserver loop completed with undelivered notifications." in v-dialog with auto width

[tmatson98]

Currently using 3.0.0-beta.3. Trying to edit an array object in a v-dialog when its width is set to anything other than a percentage or length -- such as "auto", "unset", "max-content", etc. -- fails with the error ResizeObserver loop completed with undelivered notifications.

App.vue:

<template>
  <v-app>
    <v-main>
      <v-dialog :width="autoWidth ? 'auto': '100%'" :model-value="true" persistent>
        <v-card>
          <v-form>
            <vjsf
              v-model="test"
              :schema="testSchema"
              :options="options"
            />
          </v-form>
          <v-btn @click="autoWidth = !autoWidth">Toggle width</v-btn>
        </v-card>
      </v-dialog>
    </v-main>
  </v-app>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import testSchema from './schemas/test.json'
import Vjsf from '@koumoul/vjsf'

const autoWidth = ref<boolean>(false);

window.onerror = (e) => alert(e);

const test = ref<any>(null)
const options = {}
</script>

test.json:

{
  "type": "object",
  "properties": {
    "objectArray": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "a": {
            "type": "string",
            "title": "a"
          },
          "b": {
            "type": "string",
            "title": "b"
          }
        }
      }
    }
  }
}

[tmatson98]

I've just found it can be triggered without making any changes to the v-dialog width with certain schemas; it only needs to be within a v-dialog. The following schema will also fail when trying to edit an array object:

{
  "type": "object",
  "properties": {
    "objectArray": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "a": {
            "type": "string",
            "title": "a"
          },
          "b": {
            "type": "string",
            "title": "b"
          },
          "c": {
            "type": "string",
            "title": "c"
          }
        }
      }
    },
    "enum": {
      "type": "string",
      "enum": ["Option 1", "Option 2"]
    },
    "d": {
      "type": "boolean",
      "title": "d"
    },
    "e": {
      "type": "boolean",
      "title": "e"
    },
    "f": {
      "type": "boolean",
      "title": "f"
    },
    "g": {
      "type": "boolean",
      "title": "g"
    }
  }
}

[albanm]

I didn't see this error message, but I did see a problem with resizable containers. Can you check beta.5 that I just released ?

[tmatson98]

It looks like the issue is fixed in beta.5, thanks!