[Bug Report][3.5.17] v-chip throws error in tooltip

[markusheiden]

Environment

Vuetify Version: 3.5.17
Vue Version: 3.4.25
Browsers: Chrome 124.0.0.0
OS: Mac OS 10.15.7

Steps to reproduce

I wasn't able to build a reproducer that shows the problem. But in my app

<v-tooltip text="tooltip">
  <template #activator="{ props }">
    <v-chip v-bind="props">chip</v-chip>
  </template>
</v-tooltip>

causes:

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://github.com/vuejs/core . 
  at <BaseTransition onAfterEnter=fn<onAfterEnter> onAfterLeave=fn<onAfterLeave> appear=true  ... > 
  at <Transition name="fade-transition" appear=true persisted=true  ... > 
  at <MaybeTransition appear=true persisted=true transition="fade-transition"  ... > 
  at <VOverlay ref=Ref< Proxy(Object) {…} > class="v-tooltip" style= {}  ... > 
  at <VTooltip key="EXACT" location="bottom" text="Exact Match" > 
  at <Anonymous align=undefined fixed=undefined fixedOffset=undefined  ... > 
  at <VDataTableRow key="item_4" index=0 item= {type: 'item', key: 4, index: 0, value: 4, selectable: true, …}  ... > 
  at <VDataTableRows loading=false loadingText="$vuetify.dataIterator.loadingText" hideNoData=false  ... > 
  at <VTable class="v-data-table action-adjustment" style= {} fixedHeader=true  ... > 
  at <VDataTableServer class="action-adjustment" ref="tableRef" modelValue= []  ... > 
  at <VCard key=1 > 
  at <VCol cols="12" > 
  at <VRow dense="" > 
  at <VContainer fluid="" > 
  at <MyOverview onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {_pStores: {…}, …} > > 
  at <RouterView> 
  at <VSheet class="h-100" color="secondary-darken-4" > 
  at <VMain> 
  at <VApp id="app" > 
  at <App>

Expected Behavior

Works.

Actual Behavior

Error.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

When removing ref from props my v-chip works fine again.

I processed props with

const activatorWorkaround: (activatorProps: any) => any = (activatorProps) => {
  const patchedActivatorProps: any = { ...activatorProps };
  delete patchedActivatorProps.ref;
  return patchedActivatorProps;
};

like so

    ...
    <v-chip v-bind="activatorWorkaround(props)">chip</v-chip>
    ...
</v-tooltip>

and my v-chip works again.

props logged via the console:

{ref: RefImpl, targetRef: RefImpl, onMouseenter: ƒ, onMouseleave: ƒ, onFocus: ƒ, …}aria-describedby: "v-tooltip-20"onBlur: (e) => {…}onFocus: (e) => {…}onMouseenter: (e) => {…}onMouseleave: (e) => {…}ref: RefImpl {__v_isShallow: false, dep: Map(1), __v_isRef: true, _rawValue: Array(1), _value: Proxy(Array)}targetRef: RefImpl {__v_isShallow: false, dep: Map(1), __v_isRef: true, _rawValue: undefined, _value: undefined}[[Prototype]]: Object

[KaelWD]

[Vue warn]: Unhandled error during execution of scheduler flush.

There will be another error before that. Is this #19685?

[markusheiden]

The v-chip is inside a v-data-table-server using a loop. Without the loop it works fine. So it looks similar to #19685.
I still wasn't able to build a reproducer from our application, though it reliably fails in our application.

There is a type error after the reported error:

runtime-dom.esm-bundler.js:593 Uncaught (in promise) TypeError: Cannot convert object to primitive value
    at Proxy.join (<anonymous>)
    at Proxy.toString (<anonymous>)
    at patchAttr (runtime-dom.esm-bundler.js:593:10)
    at patchProp (runtime-dom.esm-bundler.js:760:5)
    at patchProps (runtime-core.esm-bundler.js:5784:11)
    at patchElement (runtime-core.esm-bundler.js:5665:9)
    at processElement (runtime-core.esm-bundler.js:5487:7)
    at patch (runtime-core.esm-bundler.js:5344:11)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:6112:9)
    at ReactiveEffect.run (reactivity.esm-bundler.js:177:19)

The complete log

[markusheiden]

I tried the workaround from #19685 and it works for my case too. So this seems to be a duplicate of #19685 and could be closed as such. The only useful thing from this issue might be the fact that props.ref seems to cause the problem.

[ElYaiko]

The v-chip is inside a v-data-table-server using a loop. Without the loop it works fine. So it looks similar to #19685. I still wasn't able to build a reproducer from our application, though it reliably fails in our application.

There is a type error after the reported error:

runtime-dom.esm-bundler.js:593 Uncaught (in promise) TypeError: Cannot convert object to primitive value
    at Proxy.join (<anonymous>)
    at Proxy.toString (<anonymous>)
    at patchAttr (runtime-dom.esm-bundler.js:593:10)
    at patchProp (runtime-dom.esm-bundler.js:760:5)
    at patchProps (runtime-core.esm-bundler.js:5784:11)
    at patchElement (runtime-core.esm-bundler.js:5665:9)
    at processElement (runtime-core.esm-bundler.js:5487:7)
    at patch (runtime-core.esm-bundler.js:5344:11)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:6112:9)
    at ReactiveEffect.run (reactivity.esm-bundler.js:177:19)

The complete log

I''m having same issue with Tooltips.

[ElYaiko]

It happens only in the dev server, in build works ok.
Help please, I'm using nuxt@3.11.2.

@vuetifyjs