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) {
that.$.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)에서 어떤 OS를 사용하고 있습니까?

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 + 브라우저 조합에서 터치가 활성화되지 않아야 하는 경우에도 재생되지 않았습니다. OS나 브라우저 설정에 문제가 있을 수 있습니다. FF 설정을 수정했다면 터치 이벤트를 강제하는 부분이 있을 수 있습니다. 그러나 Windows의 일부 설정으로 인해 발생할 수도 있다고 생각합니다.

@mas4ivv 이에 대한 수정이 구현되어 터치 지원 장치에서 토글 버튼을 클릭할 때 이전에 초점을 맞춘 요소(있는 경우)의 초점을 해제합니다.

수정 사항은 이제 vaadin-combo-box v5.0.4 와 함께 릴리스됩니다.

이 버전의 WebJar는 게시 중이며 곧 Maven Central에서 사용할 수 있습니다(Java API용).

예, 두 가지 제안 모두 우리에게 적합합니다. 그리고 귀하의 코드를 보니 내 다음 작업은 데스크탑이 터치 장치라고 생각하는 이유를 찾는 것임을 이해합니다...

Btw 어딘가에서 Windows에서 다른 소프트웨어가 가상 터치 장치를 설치할 수 있다는 것을 읽은 것 같습니다. 어떤 이유로든 가상 터치 장치가 필요한 특수 소프트웨어를 실행하는 경우 발생할 수 있는 현상입니다.