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

Question

上面的图片显示了选择列表，但它实际上不是选择列表，它由'输入'标签组成，所以我尝试使用b.text_field.set（“argentina”）设置值，但它只关注（颜色变化）黄色）但它没有设定值，我怎么能这样做？

该选择列表的代码如下所示

{{1}}

Answer 1

问题是Watir-Classic在设置值后调用blur事件。由于未从下拉列表中选择值，因此Vaadin将此视为无效输入并将其重置为＆＃34;未选择任何国家＆＃34;。当您手动与组合框交互时，您可以看到相同的行为：

1. 单击文本字段
2. 输入＆＃34;阿根廷＆＃34;
3. 点击页面中的其他位置（即运行模糊事件）

要填充该字段，您需要从下拉列表中选择一个项目。即使输入字段被清除，下拉列表也会保留（至少在Watir-Classic执行时）。因此，我们可以在没有额外工作的情况下选择项目。

以下是使用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开发人员），这可能就足够了。