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 ("щелчок", функция (e) {
это. $. input.focusElement.select ();
});

Я только что протестировал это в Firefox 60.7.0esr (64-бит) на macOS и не могу воспроизвести его. @ mas4ivv можете ли вы

Я также загрузил конкретную версию Firefox 60.6.1esr ( отсюда ) и не могу воспроизвести проблему даже с этой (по крайней мере, на macOS).

@ mas4ivv Включены ли у вас какие-либо надстройки в Firefox? Если да, не могли бы вы попробовать отключить все надстройки, чтобы убедиться, что они не вызывают проблемы? Или, может быть, попробуйте (Приватный режим).

Я также установил Firefox 60.6.1esr на Windows 10 (64-разрядная версия) на виртуальной машине, и там он, похоже, тоже работает (не может воспроизвести проблему).

На данный момент я могу использовать только ту версию Firefox, о которой я упоминал (попробую дома с более новым Firefox), но я попробовал то же самое на своем мобильном телефоне с Chrome и получил тот же результат. Вы нажали именно на кнопку переключения? При щелчке в любом другом месте поля со списком поведение соответствует ожидаемому.

Да, я убедился, что щелкнул значок переключателя напрямую, но также протестировал щелчок в другом месте.

Теперь, когда вы упомянули мобильный Chrome, я только что протестировал Chrome на Android и вижу проблему.

@ mas4ivv Какую ОС вы используете на рабочем столе (Win, Linux, macOS)?

Firefox в Windows 7, Chrome на Android.

@ mas4ivv Вы используете сенсорный экран в Windows 7?

Я только что заметил, что могу легко воспроизвести это как в последней версии Chrome, так и в последней версии Firefox даже в macOS, если я открою инструменты разработчика и включу моделирование мобильного устройства, выбрав конкретное устройство в режиме адаптивного дизайна.

Я предполагаю, что проблема, вероятно, связана с сенсорными событиями. По крайней мере, теперь после этой реализации легче отлаживать.

Также воспроизводится в Chrome без адаптивного режима (панель инструментов устройства), выбрав «Touch: Force enabled» на вкладке «Sensors» в инструментах разработчика.

На самом деле похоже, что это функция, которая была специально реализована для предотвращения открытия виртуальной клавиатуры на сенсорных устройствах (при нажатии на кнопку переключения), если пользователь явно не щелкает / не нажимает на часть ввода.

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 : Да, нам

Я, по крайней мере, один раз тестировал это на новой виртуальной машине с Win 7 (32 бит), работающей с той же версией Firefox 60 ESR, но он не воспроизводился там, поэтому, по крайней мере, по умолчанию даже в этой комбинации ОС + браузер не должно быть включено сенсорное управление. Может что-то в вашей ОС или настройках браузера. Если вы изменили настройки FF, возможно, есть какая-то часть, которая вызывает события касания. Но я предполагаю, что это также может быть вызвано некоторыми настройками в Windows.

@ mas4ivv Исправление для этого было реализовано, так что на устройствах с сенсорным экраном он расфокусирует ранее сфокусированный элемент (если он есть) при нажатии кнопки переключения.

Исправление теперь выпущено с vaadin-combo-box v5.0.4 .

WebJar для этой версии публикуется и скоро будет доступен в Maven Central (для Java API).

Да, нам подойдут оба предложения. И, глядя на ваш код, я понимаю, что моя следующая задача - выяснить, почему наши рабочие столы считают себя сенсорными устройствами ...

Кстати, я думаю, что где-то читал, что в Windows какое-то другое программное обеспечение может установить виртуальное сенсорное устройство, что заставит браузеры думать, что компьютер поддерживает сенсорное управление. Это то, что может произойти, если вы используете какое-то специальное программное обеспечение, которому по какой-либо причине требуется виртуальное сенсорное устройство.