element-plus: [Bug Report] Maximum recursive updates exceeded in component ()

Same issue here when the el-option without slot is more than 100 and try to search for option that doesn’t exist

Reproduction Link

just updated my @vue/test-utils to the latest version and the issue is gone

Same issue with all components having popper

It’s making the components tests really slow!

[Vue warn]: Maximum recursive updates exceeded in component <ElDropdown>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

@sxzz

hi~，

I repackage the EleSelect Component 。 like：

<template>
  <el-select  :model-value="value">
    <el-option v-for="(item,index) in arr " :key=index :label="item.label" :value="item.value"></el-option>
  </el-select>
</template>
<script setup>
defineProps({
  value:{
    type:String
  },
  arr:{
    type:Array
  }
})
</script>

I use jest to test my component like

import a from "../a"
import { mount } from "@vue/test-utils"

test("component should render",()=>{
  const x = mount(a,{
    props:{
      value:"1",
      arr:[
        {label:'1',value:'1'}
      ]
    }
  })
// some expect sentence.....
})

But some unexpected exceptions happened！

 console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6503
    [Vue warn]: Unhandled error during execution of mounted hook 
      at <ElSelectDropdown> 
      at <TransitionStub> 
      at <ElPopper ref="popper" visible=false onUpdate:visible=fn  ... > 
      at <ElSelect modelValue="1" onUpdate:modelValue=fn > 
      at <Anonymous aaa="1" arr= [ { label: '1', value: '1' } ] ref="VTU_COMPONENT" > 
      at <VTUROOT>

  console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6503
    [Vue warn]: Maximum recursive updates exceeded in component <ElSelect>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

  console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6503
    [Vue warn]: Maximum recursive updates exceeded in component <ElPopper>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.


ReferenceError: ResizeObserver is not defined

I can use shallowMount to avoid mistakes ，but，What makes me wonder is why repeated rendering is triggered 。Maximum recursive updates exceeded in component

maybe ，its a same problem 。