ReactJS DropDown and PhantonJS Headless not playing nice together - reactjs

Question

Good day all,
I'm currently trying to run cucumber tests on a reactjs component, dropdown search selection, running in headless mode, using PhantonJS, but it is causing a weird situation that preventing me from completely these tests.
Using the following reactJs dropdown, http://jedwatson.github.io/react-select/, it is the "'Github users (Async with fetch.js)'"
The current issue that is according is when the scenarios gets to it fourth example test it fails but the same code is used to pass the first three tests.
I thought it was the fourth example so I changed it around with other values and it still fails on the fourth step.
This is the code used to enter the value into the drop down search
find(".Select").trigger("click")
fix_overlap = %{ $('.Select-placeholder').css('z-index', -99999) }
page.execute_script(fix_overlap)
find(".Select .Select-input input").native.send_keys(with)
find(".Select-menu-outer", text: with, visible: :all, match: :first).click
The react control is doing async call to search for the input data from an API endpoint.
I able to run the test in a browser with no issues.
The error that is being returned from the test is that I can't found the value in the drop down.
I have added the options to the environment setup when I'm registering poltergeist,
options = {:js_errors => false, phantomjs_options: ['--debug=true'], debug: false }
Capybara.register_driver :poltergeist do |app|
Capybara::Poltergeist::Driver.new(app, options)
end
to see if there is an internal error that is not shown in the debug console.
I have done a page.save_screenshot to see the state just before the error and the drop down has the correct value.
Questions
Is there any other options that can be added to show more information/errors?
Has anyone experienced this issue before?
I'm open to any suggestions to fix this weird behaviour.
Extra details
gem 'poltergeist','= 1.9.0'
gem 'cucumber', '~> 2.0'

Answer 1

For the "Cities (Large Dataset)" example on the linked page, the following code selects the "New York" entry for me, without resorting to using trigger, execute_script or native
with = "New York"
section = find('.section', text: 'Cities (Large Dataset)')
section.find('.Select').click
section.find('.Select-placeholder').send_keys(with)
section.find('.VirtualizedSelectOption', exact_text: with).click
That is using the latest Poltergeist and Capybara. Without the latest Capybara you'd probably need to pass a regex as a :text option in the last line rather than the :exact_text option (otherwise you will get multiple respones)
For the "Contributors (Async)" example
with = 'Craig Dallimore'
section = sess.find('.section', text: 'Contributors (Async)')
section.find('.Select').click
section.find('.Select-input input').send_keys(with.gsub(' ', '')
section.find('.Select-option', exact_text: with).click
will select someone