[Bug Report][3.7.2] VAutocomplete: "Multiple nodes with the same ID" error when backspacing after "no-data" state

[panypticon]

Environment

Vuetify Version: 3.7.2
Last working version: 3.7.1
Vue Version: 3.4.27
Browsers: Opera 113.0.0.0
OS: Mac OS 10.15.7

Steps to reproduce

Type a random string until "no data available" appears, then backspace until field is empty

Expected Behavior

No error in console

Actual Behavior

"Multiple nodes with the same ID" error

Reproduction Link

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

Other comments

Caused by 970f827#diff-9e9ae93c534ad2f413745ba1b6de47726b919dcb966ea267faaa99f75b337a96R219

[ottopaulsen]

There is something wrong in version 3.7.2 causing this error message.
I am getting the same error in a very strange place.

[Vue warn]: Vuetify error: Multiple nodes with the same ID
	/campaigns
	/campaigns 
  at <VListItem to= {name: 'campaigns'} exact=false class="menuItem"  ... > 
  at <PortalMenuItem key=1 title="Campaigns" to= {name: 'campaigns'}name: "campaigns"[[Prototype]]: Object  ... > 
  at <VListChildren items= [] returnObject=false > 

The error is coming from where I create the navigation menu, but it is reported on a line of code that has nothing to do with this.

In version 3.7.1 I am getting no error.

[PawelJarosiewicz]

I have the same error with v-combobox on version 3.7.2. After switching to version 3.7.1 there is no error.

My combo:
<v-combobox
v-model="startReportForm.productType"
auto-select-first="exact"
autofocus
class="mb-4"
color="secondary"
:hint="startReportForm.productType?.description"
item-title="name"
:items="productTypes"
label="Rodzaj produktu"
persistent-hint
return-object
variant="outlined"

Steps to reproduce:

• have items on your list that start with the same letter, e.g. "W",
• select one of them,
• remove letters from the end of the selected item's name using backspace,
• when you reach the letter "W" an error will appear

[NathanAP]

I'm also getting this:

<v-autocomplete>
  <template #item="{ item }">
    <v-list-item
      :id="item.raw.key"
      :to="item.raw.to"
      @click="selectItem"
    >
     ...
  </template>
</v-autocomplete>

I tried to add the id and see if it changes anything, but had no luck.

[striderwhite]

Getting this too but with list items

[lubuger]

Issue persists with vuetify 3.7.3 and vue 3.5.12

[orjan]

@J-Sek would you mind having a look at this issue? We solved one issue but introduced a new one, do you have an idea how to approach a fix for the problem above?

[J-Sek]

We solved one issue but introduced a new one, do you have an idea how to approach a fix for the problem above?

It looks like list items are keyed by index instead of item.value and it causes issues with unreliable calls on onBeforeUnmount. While it can be easily fixed, it uncovered another issue – this time warning is triggered with typing the first letter. To force correct list of registered nodes we could clear filtered items and reapply them in nextTick, but it makes filter.ts coupled with rendering logic and also is not unit-test friendly :/ Not sure if the core team will pass this.

[Asko-Dev]

+1 Also getting this with <v-list> and <v-list-items> children, on the items that have the same to route.

[J-Sek]

+1 Also getting this with <v-list> and <v-list-items> children, on the items that have the same to route.

@Asko-Dev, could you share code with playground? I would check if my current PR covers this or not.

[orjan]

+1 Also getting this with <v-list> and <v-list-items> children, on the items that have the same to route.

@Asko-Dev, could you share code with playground? I would check if my current PR covers this or not.

Is there a playground that includes vue-router? Otherwise I can try to setup a new repository.