v-autocomplete and cypress

[ThomasTNT]

Hello

since upgrading to vue3 the component tests will not work anymore.
I want to

• select a v-autocomplete component by data-cy value. (this works)
• type something (e.g. "Thomas") and all items with "Thomas" are listed (this works)
• use the first one by type("{arrow down}" (this also works)
• press/type enter to select this item. (this will not work!)

I noticed the menu of items are not children of the component anymore.
I can find the elements by class (".v-list-item__content") and click on one in cypress.
But I cannot find the correct on which is currently highlighted by arrow clicking.

When I press enter on the keyboard by hand then it works. But firing it via cypress it seems it goes the wrong way.

cy.get('[data-cy=combobox-mycombobox]')
.click({ force: true })
.type("Thomas")
.type('{downArrow}')
.type('{enter}')  //this will not select the first item anymore

I can directly find an entry and click it. But I dont find the correct one selected by arrows.

cy.get('.v-list-item__content').contains("Thomas-666").click() //works if there is an entry "Thomas-666".

What is the best approach?

Thanks Thomas

[Roberto-Stanley]

I had the same issue, but I could resolve it, here is the code
cy.get('form').get('.v-autocomplete .v-field__field').click({ force: true }).type('u{downArrow}{enter}');
This worked for me.