title: select react-select dropdown list option using cypress
body: <p>Does anyone know how to select an option from a react-select dropdown list in a cypress test?</p>
  
  <p>I have tried lots of stuff but to no avail.</p>
  
  <p>Seems that react-select uses a hidden input. That cypress can not write into. And divs that cypress can also not write into either.</p>
  
  <p>It also does not help that I do not know how to inspect the actual dropdown list in dev tools because it does not stay open.</p>
  
  <p>I am using:</p>
  
  <ul>
  <li>react-select v2.4.1</li>
  <li>cypress v3.1.5</li>
  </ul>
  
  <h3>Edit 1:</h3>
  
  <p>@bkucera's answer works. The working Code I ended up was:</p>
  
  <pre class="lang-js prettyprint-override"><code>it('updates Person', () =&gt; {
      cy.get('[data-id=bearbeiter]')
        .find('.css-10nd86i')
        .click()
        .find('input')
        .eq(1)
        .focus()
      cy.contains('Test Tester').click({ force: true })
    })
  </code></pre>
  
  <p>I had to add an <code>.eq(1)</code> after <code>find</code> because there seem to be two inputs.</p>
  
  <h3>Edit 2:</h3>
  
  <p>Above solution ended up clicking on elements in the nav tree on my site that happened to contain the same text. So no cigar :-(</p>
  
  <h3>Edit 3:</h3>
  
  <p>I have also tried this solution:</p>
  
  <pre class="lang-js prettyprint-override"><code>Cypress.Commands.add('setSelectOption', ({ selector, option, value }) =&gt; {
    cy.get(selector)
      .find('.css-10nd86i input')
      .eq(1)
      .focus()
      .type(value, { force: true })
  })
  </code></pre>
  
  <p>...but even though <code>force: true</code> is used I get this error:</p>
  
  <pre><code>The element typed into was:
  
    &gt; &lt;input name="aeId" type="hidden" value="862333db-31cf-444c-b8ea-021c640c7a44"&gt;
  
  Cypress considers the 'body', 'textarea', any 'element' with a 'tabindex' or 'contenteditable' attribute, or any 'input' with a 'type' attribute of 'text', 'password', 'email', 'number', 'date', 'week', 'month', 'time', 'datetime', 'datetime-local', 'search', 'url', or 'tel' to be valid typeable elements.
  </code></pre>
  
  <h3>Edit 4:</h3>
  
  <p>So far this has worked best:</p>
  
  <pre class="lang-js prettyprint-override"><code>Cypress.Commands.add('setSelectOption', ({ selector, option, value }) =&gt; {
    cy.get(selector)
      .find('.css-10nd86i input:text')
      .focus()
      .type(option, { force: true, delay: 600, timeout: 330000 })
      .type('{enter}', { force: true })
    cy.get(selector)
      .find('.css-10nd86i')
      .find('input')
      .eq(1)
      .should('have.value', value)
  })
  </code></pre>
  
  <p>At least it works for short lists. Text is entered slowly. For our species list (7000 long) I added those <code>delay</code> and <code>timeout</code> options. Delay seems to help but I have not been able to understand exactly how these options influence behaviour. And sometimes cypress times out :-(</p>
  
  <h3>Edit 5:</h3>
  
  <p>Meanwhile (react-select v3.0.4, cypress v3.3.2) all tests fail because:</p>
  
  <pre><code>Expected to find element '.css-10nd86i' but never found it
  </code></pre>
  
  <p>I guess the class has changed. Not surprising with such a brittle solution :-(</p>