클릭 시 v-date-picker v-menu를 열고 v-text-field에 초점을 맞춥니다.

클릭 시 v-date-picker v-menu를 열고 v-text-field에 초점을 맞춥니다.

앱에 날짜 선택 컴포넌트가 있어서 메뉴로 예를 사용하여 열 수 있습니다.
데스크톱 사용자가 보다 효율적으로 사용할 수 있도록 하기 위해readonly수동 입력이 가능하도록 플래그를 지정합니다.
이제 데스크톱 사용자는 양식의 여러 필드를 탭하여 날짜와 시간을 빠르게 입력할 수 있습니다.여기서의 문제는 사용자가 필드를 탭할 때 날짜 선택기가 나타나지 않는다는 것입니다. 이 필드는 추가 기능으로 쉽게 수정되었습니다.@focus="menuVariable=true"텍스트 필드로 이동합니다.
그러나 현재 문제는 사용자가 텍스트 필드를 처음 클릭할 때 날짜 선택기가 더 이상 나타나지 않는다는 것입니다. 적어도 일관성은 없지만, 저는 이 필드를 수정할 수 없습니다.클릭 이벤트를 듣고 메뉴의 토글을 true로 설정하려고 했지만, 애초에 그 변수를 설정하는 것이 문제인 것 같습니다.이 문제를 해결하는 방법이나 수동으로 메뉴를 여는 방법을 알 수 없습니다.

여기 문제를 보여주는 코드펜이 있습니다.두 필드 사이를 조금 클릭하면 오른쪽에 있는 날짜 선택기가 항상 열리고 왼쪽에 있는 날짜 선택기가 가끔 열립니다.

사용자가 텍스트 필드(또는 v-메뉴의 다른 부분)를 클릭하거나 텍스트 필드를 탭할 때 날짜 선택자를 일관되게 표시할 수 있는 더 좋은 솔루션을 알고 있는 사람이 있습니까?

@keyup="menuVariable=true"
@keydown="menuVariable=false"

이걸로 작업했어요.

여기 좋은 솔루션이 있습니다.

https://codepen.io/Phennim/pen/KKPYGRK

v-on:focus="onFocus"
v-on:blur="onBlur"

도움이 되길 바랍니다.

언급URL : https://stackoverflow.com/questions/52494193/opening-a-v-date-picker-v-menu-on-click-and-focusing-a-v-text-field-inside-it