Cannot select option in capybara - ruby

Question

I have a problem selecting option from the dropdown.
The HTML is this:
<div unselectable="on" class="k-widget k-multiselect k-header" style="" title="">
<div unselectable="on" class="k-multiselect-wrap k-floatwrap">
<ul class="k-reset" unselectable="on" role="listbox"></ul>
<input style="width: 25px" class="k-input k-readonly" accesskey="" autocomplete="off" role="listbox" aria-expanded="false" tabindex="0" aria-owns="" aria-disabled="false" aria-readonly="false" aria-busy="false" aria-activedescendant="28dfc7ec-69a2-4a95-ba29-1f94e899c7e3">
<span class="k-icon k-loading k-loading-hidden"></span>
</div>
<div data-bind="source: getTreeValues, value: selectedCrmAttributes.DYN_" data-text-field="name_i18n" data-value-field="attributeId" data-value-primitive="false" data-auto-bind="true" data-role="interestselect" multiple="multiple" style="display: none;" aria-disabled="false" aria-readonly="false">
<option value="DYN_#76ed2b3f-4d64-4d07-8ba7-ab6f133e0c70">one.csv</option>
<option value="DYN_#6f914af1-ba58-4c40-99fe-e874bdf9c47b">two.csv</option>
<option value="DYN_#4cd908d0-6c61-4a15-84e7-f113aa7a8ed4">three.csv</option>
<option value="DYN_#c137cfad-81af-4164-90b1-a518a7595baa">four.csv</option>
</div>
<span style="font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 13px; font-stretch: normal; font-style: normal; font-weight: 300; letter-spacing: normal; text-transform: none; line-height: 17.0333px; position: absolute; visibility: hidden; top: -3333px; left: -3333px;"></span>
</div>
I have tried to select the option by this way
And(/^selecting (.*) from (.*)$/) do |item, selection|
find('.dgr-dimensions-row', :text=>selection).find('.k-widget.k-multiselect.k-header').click
#expect(page).to have_content(item) -> returns true
select(item)
end
Where the item is the option i want to select and selection is filter from where I want to select the item.
Example: If I have a filter File and the options are one, two, three, four.
Then the selection is File and the item is one for example.
I'm using
cucumber 2.1.0
ruby 2.1.6
nokogiri 1.6.6.2
capybara 2.4.4
selenium-webdriver 2.47.1
Thanks in advance!
EDITED
I would like to select the option by text, that the ruby step can be reusable. I have many similar fields like this one and it would be useful if I can reuse the same step.
Picture:
EDITED 2
<ul unselectable="on" class="k-list k-reset" tabindex="-1" aria-hidden="true" aria-live="polite" data-role="staticlist" role="listbox" style="overflow: auto; height: auto;">
<li tabindex="-1" role="option" unselectable="on" class="k-item k-state-focused" data-offset-index="0" id="96c13cd6-8365-4e73-a134-6395988822f7">one.csv</li>
<li tabindex="-1" role="option" unselectable="on" class="k-item" data-offset-index="1">two.csv</li>
<li tabindex="-1" role="option" unselectable="on" class="k-item" data-offset-index="2">three.csv</li>
<li tabindex="-1" role="option" unselectable="on" class="k-item" data-offset-index="3">four.csv</li>
</ul>

Answer 1

Capybaras #select only works with visible html option elements. The issue here is that you appear to be using a kendo multiselect widget which hides the real option elements ( btw your html is invalid since option elements are only legally allowed to be inside a select, optgroup, or datalist element) and then generates a visible UI using li elements inside a ul.k-list. From looking at a demo of the kendo multiselect - http://demos.telerik.com/kendo-ui/multiselect/index - it appears the actual ul.k-list element is attached to the page outside of the widget div and therefore a find can't be scoped to the widget, and the ul.list is given an id of "#{id of select hidden in multiselect widget}_list". Since your html doesn't appear to have an id on the hidden element in the widget there is no way to scope with that either. Because of all of that, rather than doing select(item) you should be able to use
find('.k-list li.k-item', text: item).click
to click on the element in the dropdown that becomes visible after you click in the header. It would be better if this find could be scoped to a particular .klist on the page, but hopefully there is only ever one actually visible while you're running the tests.