Vaadin-combo-box: 单击切换按钮应聚焦输入

@mas4ivv你能用这个演示重现这个问题吗？
https://jazzy-pedestrian.glitch.me

代码在这里（按菜单中的“Remix Project”进行更改）：
https://glitch.com/edit/#!/jazzy -pedestrian?path=index.html

目前，在执行上述步骤时，我可以通过单击切换按钮来聚焦组合框。
您确定您使用的是最新版本的组件吗？

我可以通过您使用 Firefox 60.6.1esr（我目前唯一可以使用的浏览器）提供的链接重现该问题。 当我聚焦文本字段并单击切换按钮时，弹出窗口会打开，但焦点仍留在文本字段内。 键盘所做的所有输入都会进入文本字段。

作为一种解决方法，我在组合框中包含了一个点击侦听器：
this.$.toggleButton.addEventListener("click", function (e) {
那.$.input.focusElement.select();
});

我刚刚在 macOS 上的 Firefox 60.7.0esr（64 位）上对此进行了测试，但无法重现。 @mas4ivv你能把你的 Firefox ESR 版本升级到这个最新的 60.7.0esr 然后再试一次吗？

我还下载了特定版本的 Firefox 60.6.1esr（来自此处），即使使用该版本（至少在 macOS 上）也无法重现该问题。

@mas4ivv您是否在 Firefox 中启用了任何附加组件？ 如果是这样，您能否尝试禁用所有附加组件以检查它们不会导致问题？ 或者尝试（私人模式）。

我还在虚拟机中的 Windows 10（64 位）上安装了 Firefox 60.6.1esr，它似乎也可以工作（无法重现问题）。

目前我只能使用我提到的 Firefox 版本（将在家里尝试使用更新的 Firefox），但我在我的手机上用 Chrome 尝试了同样的方法并得到相同的结果。 您是否准确地单击了切换按钮？ 单击组合框上的任何其他位置时，行为与预期一致。

是的，我确保直接点击切换按钮图标，但也测试了点击其他地方。

既然你提到了移动 Chrome，我也刚刚在 Android 上测试了 Chrome，我可以看到问题所在。

@mas4ivv您在桌面上使用哪种操作系统（Win、Linux、macOS）？

Windows 7 上的 Firefox，Android 上的 Chrome。

@mas4ivv您是否在 Windows 7 上使用触摸屏？

我刚刚注意到，如果我打开开发工具并通过在响应式设计模式中选择特定设备来启用移动设备模拟，即使在 macOS 上，我也可以在最新的 Chrome 和最新的 Firefox 上轻松重现这一点。

我想问题可能与触摸事件有关。 至少现在在实现之后更容易调试。

通过从开发工具的“传感器”选项卡中选择“触摸：强制启用”，也可以在没有响应模式（设备工具栏）的 Chrome 中重现。

实际上看起来这是一个专门实现的功能，以防止在触摸设备上打开虚拟键盘（点击切换按钮时），除非用户明确点击/点击输入部分。

https://github.com/vaadin/vaadin-combo-box/blob/master/src/vaadin-combo-box-mixin.html#L331

// For touch devices, we don't want to popup virtual keyboard on touch devices unless input
// is explicitly focused by the user.
if (!this.$.overlay.touchDevice) { //...

如果它不是启用触摸的设备，则此部分仅关注输入（单击切换按钮时）。

我们可能需要重新考虑这应该如何运作。

如果能够以某种方式检测到设备启用了触摸功能但没有虚拟键盘（例如默认情况下在移动设备上），这将有所帮助。 或者，如果我们可以检测到它不是“移动设备”而是启用了触摸功能。 我不确定在大多数情况下什么是最好的逻辑。 考虑到带有触摸屏或其他“混合”设备的笔记本电脑，这可能会变得有点复杂。

一种可能性是检查视口尺寸，如果视口足够大（假设它不是虚拟键盘在屏幕上占用大量空间的移动电话），那么它可能可以将输入集中在一个触摸设备。

或者，我们可以只检查组合框的父根是否有其他焦点元素而不是组合框，并至少模糊该元素（如果不聚焦组合框的输入）。 这可能已经足够好了。 至少将注意力集中在一些外部元素上似乎很奇怪，这样就可以解决这个问题。

@mas4ivv考虑到上述情况，如果在这种情况下（在触摸设备上）我们只是以某种方式聚焦组合框而不聚焦输入部分，或者只是确保不聚焦任何外部元素（文本在这种情况下的字段）单击切换按钮时可能具有焦点？

@Haprog ：是的，这两个建议都适合我们。 看到你的代码我明白我的下一个任务是找出为什么我们的桌面认为它们是触摸设备......

我至少在运行相同版本的 Firefox 60 ESR 的 Win 7（32 位）的新 VM 上至少测试了一次，但它没有在那里重现，所以至少默认情况下即使 OS + 浏览器组合不应该启用触摸。 可能是您的操作系统或浏览器设置中的某些内容。 如果您修改了 FF 设置，则可能有某些部分会强制触摸事件。 但我想这也可能是由 Windows 中的某些设置引起的。

@mas4ivv 对此进行了修复，以便在启用触摸功能的设备上单击切换按钮时，它将取消聚焦先前聚焦的元素（如果有）。

该修复程序现在随vaadin-combo-box v5.0.4 一起发布。

此版本的 WebJar 正在发布，很快就会在 Maven Central 中可用（用于 Java API）。

是的，这两个建议都适合我们。 看到你的代码我明白我的下一个任务是找出为什么我们的桌面认为它们是触摸设备......

顺便说一句，我想我在某个地方读到过，在 Windows 上，其他一些软件可以安装虚拟触摸设备，这会使浏览器认为计算机启用了触摸功能。 如果您正在运行一些出于任何原因需要虚拟触摸设备的特殊软件，则可能会发生这种情况。