[vue3] ‘ResizeObserver loop completed with undelivered notifications.’ 에러 해결하기

Feb 21, 2024

Contents

[vue3] 배달 반경범위 v-autocomplete 클릭 시 ‘ResizeObserver loop completed with undelivered notifications.’ 에러가 발생했다. 다른 v-autocomplete 클릭 시에는 에러가 안나고 간헐적으로 배달 반경범위 뒤 input은 에러가 안날 때도 있었다.


       <v-autocomplete
          focused
          item-title="text"
          item-value="value"
          v-model="kilometerProductComputed"
          :items="maxKilometerProductOptionList"
          variant="outlined"
          hide-details="auto"
          :filled="kilometerProductAllYnComputed"
          :disabled="kilometerProductAllYnComputed"
          :error="isNotValidKilometerProductError"
          @keyup="$event.stopPropagation()"
          @blur="handleBlurKilometerProductTypeField(
            formData.hubConfiguration.kilometerProduct)"
        ></v-autocomplete>

Solution

ResizeObserver 의 설명을 보고 감을 잡았다. 이 인터페이스는 Element의 내용 또는 테두리 상자 또는 SVGE 요소의 테두리 상자의 치수 변경을 보고한다.

클릭할 때마다 v-autocomplete의 width가 움직이고 있었던 것이 원인이었다.

focus 시 v-autocomplete--active-menu 라는 클래스가 추가되면서 width가 변경되고 있다.

v-input__control의 width를 고정하여 해결하였다.


<style lang="scss" scoped>
	:deep() {
	  .input-wrapper {
	    .v-autocomplete {
	      .v-input__control {
	        width: 296px;
	      }
	    }
	  }
	}
</style>

<style lang="scss" scoped>:deep() { .input-wrapper { .v-autocomplete { .v-input__control { width: 296px; } } }}</style>

Contents

Solution

[vue3] ‘ResizeObserver loop completed with undelivered notifications.’ 에러 해결하기

Feb 21, 2024

Contents

Solution


       <v-autocomplete
          focused
          item-title="text"
          item-value="value"
          v-model="kilometerProductComputed"
          :items="maxKilometerProductOptionList"
          variant="outlined"
          hide-details="auto"
          :filled="kilometerProductAllYnComputed"
          :disabled="kilometerProductAllYnComputed"
          :error="isNotValidKilometerProductError"
          @keyup="$event.stopPropagation()"
          @blur="handleBlurKilometerProductTypeField(
            formData.hubConfiguration.kilometerProduct)"
        ></v-autocomplete>

Solution

ResizeObserver 의 설명을 보고 감을 잡았다. 이 인터페이스는 Element의 내용 또는 테두리 상자 또는 SVGE 요소의 테두리 상자의 치수 변경을 보고한다.

클릭할 때마다 v-autocomplete의 width가 움직이고 있었던 것이 원인이었다.

focus 시 v-autocomplete--active-menu 라는 클래스가 추가되면서 width가 변경되고 있다.

v-input__control의 width를 고정하여 해결하였다.


<style lang="scss" scoped>
	:deep() {
	  .input-wrapper {
	    .v-autocomplete {
	      .v-input__control {
	        width: 296px;
	      }
	    }
	  }
	}
</style>

<style lang="scss" scoped>:deep() { .input-wrapper { .v-autocomplete { .v-input__control { width: 296px; } } }}</style>

Contents

Solution