如何 select 这个使用文本输入元素的自定义 Vaadin 组合框中的项目？

Question

上图显示了 select 列表，但它实际上不是 select 列表，它由 'Input' 标签组成，所以我尝试使用 b.text_field.set 设置值("argentina") 但它只聚焦（颜色变为黄色）但它没有设置值，我该怎么做？

select 列表的代码如下

<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>

Answer 1

问题是 Watir-Classic 在设置值后调用了 blur 事件。由于下拉列表中的值不是 select，Vaadin 将其视为无效输入并将其重置回 "No country selected"。当您手动与组合框交互时，您会看到相同的行为：

单击文本字段
输入"argentina"
单击页面中的其他位置（即运行模糊事件）

要填充该字段，您需要 select 从下拉列表中选择一个项目。即使输入字段被清除，下拉列表仍然存在（至少当 Watir-Classic 这样做时）。因此，我们能够 select 无需额外工作的项目。

这是一个使用 Vaadin 演示页面的示例：

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

请注意，这不会复制用户与该字段交互时生成的确切事件。但是，如果您只是使用控件，而不是测试字段（即 Vaadin 开发人员），这可能就足够了。

如何 select 这个使用文本输入元素的自定义 Vaadin 组合框中的项目？

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

watir

vaadin

watir-classic