Programmatically focus select component

I’m looking to write an integration test for a form that uses a react-select component. This is the Ruby code that I have for it now:

find(".Select").click
find(".Select .Select-input input").native.send_key("Text goes here")
find(".Select-option", text: option_value.presentation).click

I would believe this would:

1. Open the input field
2. Send the phrase “text goes here” into the field.
3. Find the option that matches that text, and then click it.

However, I’m getting this error in my tests:

Capybara::Poltergeist::MouseEventFailed:
       Firing a click at co-ordinates [356.5, 384] failed. Poltergeist detected another element with CSS selector 'html.js.touch body#en-AU-be.loggedin div.wrapper div.main div div.form--flat div.AdvertForm div.DisplayPanel div div.row div#option_type_wrapper_1.span6.error span.select div.Select.is-focused.is-open.is-searchable div.Select-control div.Select-placeholder' at this position. It may be overlapping the element you are trying to interact with. If you don't care about overlapping elements, try using node.trigger('click').

I would consider documentation for how to integration test a react-select (even if it is with some jQuery functions) would be something that this library should provide. I am considering this a “bug” with the documentation for this component, which is why I’m filing this issue.

Please add some examples of programatically triggering / filling in this element with jQuery.

[seclace]

It seems to changes in library itself, so we need to trigger event touchend on svg icon or its wrapper to open options list to be able to select one.

This link may be helpful to testing in chrome (presumably puppeteer for integration tests): https://stackoverflow.com/a/42447620

[josias-r]

Tried all the options above, nothing worked in plain js for me. But after a while I figured out, this works:

selectContainer
  .querySelector(".YOUR_CUSTOM_CLASS__dropdown-indicator")
  .dispatchEvent(
    new MouseEvent("mousedown", {
      button: 0,
      bubbles: true, // this is key, otherwise it wont work
    })
  ); // open the menu by "clicking" dropdown indicator

Where selectContainer is just some higher level DOM element wrapping the specific select you are interested in. In my case I simply wrapped it with a new div, but you can of course you can querySelect an existing Select container