Enter on cypress after type is not input the value - dom

Question

I just did a cypress curse on Udemy and I am trying to learn a bit more.
I am using this simple code line to get a box and enter a value inside using type and enter, however I am getting no error and the value is not showing inside the box.
here is the code line cy.get('[class="multiselect__tags"]').eq('10').type('2,000,000{enter}')
how I am new I am using index to get the box since in the page there is more than 18 boxes with the attributes.
cy.get('[class="multiselect__tags"]').eq('10').type('2,000,000{enter}')
cy.get('[class="multiselect__tags"]').eq('11').type('2,000,000{enter}')
cy.get('[class="multiselect__tags"]').eq('12').type('1,500{enter}')
Here is the DOM
here is how it shows in the test

Answer 1

The Vue-multiselect control allows the user to select items from a list, or type a value and press enter to select it.
The result is a "tag" for each of the selected items is added to the input box.
To select by typing, this is how it can be done on the demo page
it('selects from vue-multiselect by typing', () => {
cy.viewport(1000,1000)
cy.visit('https://vue-multiselect.js.org/')
cy.get('div.multiselect').eq(0) // there is no id to work with so just get 1st
.type('NO Dependencies{enter}'); // select an item
cy.get('div.multiselect').eq(0) // same parent as above
.within(() => { // now work within that select
cy.get('span.multiselect__tag') // check the tags
.should('have.length', 1) // only one selected
.invoke('text')
.should('contain', 'NO Dependencies') // has the expected text
})
cy.get('div.multiselect').eq(0) // same select
.type('GitHub Stars{enter}'); // select another item
cy.get('div.multiselect').eq(0)
.within(() => {
cy.get('span.multiselect__tag') // check the tags
.should('have.length', 2) // now two selected
.invoke('text')
.should('contain', 'GitHub Stars') // has the expected text
})
})
To select by clicking the dropdown list
it('selects from vue-multiselect by clicking', () => {
cy.viewport(1000,1000)
cy.visit('https://vue-multiselect.js.org/')
cy.get('div.multiselect').eq(0)
.within(() => {
cy.get('div.multiselect__select').click() // open the dropdown
cy.get('li.multiselect__element')
.contains('NO Dependencies')
.click() // select an item
})
cy.get('div.multiselect').eq(0) // same parent as above
.within(() => { // now work within that select
cy.get('span.multiselect__tag') // check the tags
.should('have.length', 1) // only one selected
.invoke('text')
.should('contain', 'NO Dependencies') // has the expected text
})
})
In your web page, the multiselect has a data-vv-name attribute which should pinpoint the particular control we want,
const controlSelector = 'div.multiselect[data-vv-name="data.eoConditions.liability"]';
cy.get(controlSelector)
.type('2,000,000{enter}'); // select an item
cy.get(controlSelector) // same parent as above
.within(() => { // work within that control
cy.get('span.multiselect__tag') // check the tags
.should('have.length', 1) // only one selected
.invoke('text')
.should('contain', '2,000,000') // has the expected text
})
})
I'm not sure if you can select two values on this particular control, it does not make sense to do so since there could be only one liability limit.