cypress: cy.click() on React Select v1 component doesn't show the drop down

This is what i do to interact with React Select components:

Cypress.addParentCommand('chooseReactSelectOption', (selector, text, option) => {
  cy
    .get(`${selector} .Select-control input`).first().click({ force: true }).type(text, { force: true })
    .get('.Select-menu').contains(option).click();
});

This is what i do to interact with React Select components:

Cypress.addParentCommand('chooseReactSelectOption', (selector, text, option) => {
  cy
    .get(`${selector} .Select-control input`).first().click({ force: true }).type(text, { force: true })
    .get('.Select-menu').contains(option).click();
});

Thanks a lot for sharing. I found that I needed to make some adjustments – maybe because I’m using React Select v2.0.0, which was just released:

// cypress/support/commands.js

// …

Cypress.Commands.add("chooseReactSelectOption", (selector, text, option) => {
  cy
    .get(`${selector} input`)
    .first()
    .click({ force: true })
    .type(text, { force: true })
    .get(`${selector} .select__menu`)
    .contains(option)
    .click();
});

(It seems like some class names have been changed.)

I used the ID I set on the input as a selector:

// cypress/integration/create_questions_spec.js

// …

cy.chooseReactSelectOption('#respondents-input', 'clark@kent.com', 'clark@kent.com');

// …

// src/components/EditQuestion.js

// …

<Select
  defaultValue={selectedRespondentOptions}
  isMulti
  name="respondents"
  options={respondentOptions}
  classNamePrefix="select"
  id="respondents-input"
  onChange={this.onRespondentInputChange}
  styles={colourStyles}
/>

// …

@dziamid The trick does work! The key is to type on ‘input’ element. A simplified version:

it('works when type on the input element', function() {
  cy
    .visit('http://jedwatson.github.io/react-select/')
    // comparing to OLD VERSION that doesn't work as below comment line
    // .get('div.Select-control:first').click()
    // the key of the trick is to type on the input element
    .get(`div.Select-control input`).first().type('V')
    .get('.Select-option:contains(Victoria)')
    .click();
});

This fix will go out in the next release. I’ll be opening a new issue describing it and linking it here. There were a few edge cases surrounding focus events that we are getting nailed down. It will likely fix other issues two. There were two separate but related problems going on which made it difficult to track down.

I modified this to find the input by label instead of id, and also added a delay before selecting the option as my input involves an async call. Hopefully someone find’s it useful. Using react-select@3.0.4

Cypress.Commands.add(
  'chooseReactSelectOption',
  (label, text, option, selectDelay = 0) => {
    cy.contains(label)
      .parent()
      .find(`input`)
      .click({ force: true })
      .type(text, { force: true });

    cy.wait(selectDelay);

    cy.get(`[class*="-menu"]`)
      .contains(option)
      .click();
  },
);

@yhoiseth fixes for react-select v2.0 will be in this PR #2982 The issue associated with v2 is #1486 , so feel free to drop a comment on there

It also works if you type a string with an empty space

cy
    .get('div.Select input')
    .first()
   // It will show all the options
    .type(' ', { force: true })
    .get('.Select-option')
    .first()
    .click()

Works for headed mode (Chrome 67) and headless mode (Chrome 59) Cypress 3.0.2

The problem is not resolved yet. It’s actually originating from react-select and I wonder if cypress can actually work around the issue there without solving the root cause itself. The problem is that react-select dropdown won’t open when the window is not focused. For example, even when you use the full gui browser but you open devtools and your window focus is on devtools instead of the app window, it still won’t open.

The input solution that was suggested above indeed works, but obviously only for input enabled react-select. No input still causes problems. We currently worked around this by running --browser chrome --headed (unfortunately, since it’s not ideal).