Im unable to switch values in a dropdown in cypress. The dropdown is not select type - dropdown

Question

In my scenario i need to switch to the values available in the dropdown and verify the results based on the selection.I have 'In-Network' and 'Out-of-Network' values in the dropdown. By default one value will be shown and another one is hidden. This dropdown is not a select type. So when i try,
cy.get('#react-select-dropdown-value-value').select('Out-of-Network'); - Script fails and the error says, the element is not select type.
Then tried,
cy.get('#react-select-dropdown-value-value').eq(0).click(); -
it clicks the dropdown, and doesnt click on the value intended. i have tried click({multiple: true}). but didnt work. force:true, is not clicking either.
cy.get('#react-select-dropdown-value-value').contains(Out-of-Network').click(); - did not work, says the element is not found
cy.get('#dropdown-value')
.should('be.visible')
.eq(0)
.contains('Out-of-Network')
.click();
CypressError: Timed out retrying: expected '' to be 'visible'
This element '' is not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: 'hidden', 'scroll' or 'auto'

Answer 1

The react-select-dropdown is a bit special indeed. What we do to select a value from a react-select-dropdown is the following:
cy.get('[id*="start-shift-floats"]').click()
cy.get('[id^="react-select-"]')
.contains('Out-of-Network')
.click()
What you should know about this:
cy.get('[id*="start-shift-floats"]') is the actual get() to open up the dropdown. So it will be named different in your application.
cy.get('[id^="react-select-"]') is the usual get() for the options in a react-select-dropdown. By checking it which contains 'Out-of-Network', we can let Cypress click that specific option.