Search code examples
vaadinwatirwatir-classic

How to select items in this custom Vaadin combo box that uses an text input element?

enter image description here

The above pic shows the select list but it's not actually select list, it consist of 'Input' tag, So I tried to set the value using b.text_field.set("argentina") but it only focuses(color changes to yellow) but it's not setting the value, how could I do that?

The code for that select list is given below

<div class="v-filterselect v-widget v-has-width v-filterselect-prompt" role="combobox" style="width: 100%;">
  <input tabindex="0" class="v-filterselect-input" id="gwt-uid-17" aria-labelledby="gwt-uid-16" style="width: 100%;" type="text" autocomplete="nope">
  <div class="v-filterselect-button" role="button" aria-hidden="true">
  </div>
</div>
Solution

  • The problem is that Watir-Classic calls the blur event after setting the value. As a value is not selected from the dropdown, Vaadin considers this as an invalid input and resets it back to "No country selected". You can see the same behaviour when you interact with the combobox manually:

    1. Click the text field
    2. Type "argentina"
    3. Click somewhere else in the page (ie runs the blur event)

    To populate the field, you need to select an item from the dropdown. Even though the input field is being cleared, the dropdown does remain (at least when Watir-Classic does it). As a result, we are able to select an item without extra work.

    Here is an example using the Vaadin demo page:

    require 'watir-classic'

browser = Watir::Browser.new
browser.goto('http://demo.vaadin.com/sampler/#ui/data-input/multiple-value/combo-box')

country = 'ARGENTINA'

browser.text_field(aria_labelledby: 'gwt-uid-16').when_present.set(country)
browser.div(id: 'VAADIN_COMBOBOX_OPTIONLIST').span(text: country).when_present.click

    Note that this will not replicate the exact events generated when a user interacts with the field. However, if you are just using the control, rather than testing the field (ie a Vaadin developer), this is likely sufficient.