Vuetify Select Component and Cypress - vuetify.js

Question

I have a component with a Vuetify Select component:
<v-select
:items="corporations"
label="Corporation name"
data-test="corporation-name"
outlined
></v-select>
And I want to simulate a selection with a Cypress test:
cy.get('[data-test="corporation-name"]').select('Thorgate');
Unfortunately, I can't and I have this error message:
CypressError: cy.select() can only be called on a <select>. Your subject is a: <input data-test="corporation-name" id="input-13" readonly="readonly" type="text" aria-readonly="false" autocomplete="off">
I have also try to enter the value with a type()but Cypress told me
CypressError: Timed out retrying: cy.type() failed because this element is readonly:
Any idea, please?

Answer 1

The errors are pretty self-explanatory.
You're trying to apply a cy.select() method to an <input> tag, when you need a <select> tag
You're trying to .type() into a <input readonly>
cy.select() can only be applied to a <select> tag. If your v-select component renders a "custom select that is a bunch a dynamic divs and inputs INSTEAD of a select", then you need to create a custom Cypress command to handle a cy.customSelect() behavior. For example, it would: click on the main wrapper, find a option by typing words, and click on it... therefore selecting the option
For the second one, because your input is readonly, you can try to use {force: true} in your options when typing (cy.type("text", {force: true})

Answer 2

A little bit late, but, I hope this can help someone. ;)
The easier way I found to solve the problem with vuetify v-select, is using {force: true}, as stated by Jordan, and "pressing enter" at the end of string, like so:
cy.get('[data-test="corporation-name"]').type('Thorgate{enter}',{force:true});
https://docs.cypress.io/api/commands/type#Arguments