React-tags: 태그 삭제 후 입력 시 자동 초점 상실

태그에서 국가 삭제

입력이 비어 있을 때 백스페이스를 누르거나 태그를 클릭하여?

죄송합니다. 태그의 닫기 버튼을 눌러야 합니다. 백 스페이스로 삭제하면 자동 초점이 있습니다

추가 정보 @ekinalcar에 감사드립니다.

포커스가 있는 요소가 파괴되기 때문에 포커스가 기본적으로 창으로 돌아가게 될 것이라고 가정합니다... 이상적이지는 않습니다! 나는 우리가 태그에 착지할 때 초점이 어디에서 왔는지 기록하고 제거될 때 거기로 되돌려야 할 필요가 있다고 생각합니다.

@i-like-robots 빠른 답변 감사합니다.

백스페이스가 있는 삭제 이벤트에서 입력이 비어 있어도(태그 없이) 포커스는 창 대신 동일한 입력에 있습니다.

안녕하세요 @ekinalcar - 이것을 재현할 수 있었습니다. 마우스를 사용하면 Firefox와 Safari가 모두 예상대로 일관되게 작동하지만 Chrome에서는 클릭 이벤트가 캡처되더라도 커서 초점이 때때로 손실된다는 것을 발견했습니다.

그러나 키보드를 사용하고 의도하지 않은 스페이스바를 눌러 태그를 "클릭"하면 항상 포커스가 손실됩니다. 이 문제를 해결하면 Chrome의 간헐적인 문제도 해결되기를 바랍니다.

이것을 선택적으로 만들 수 있는 방법이 있습니까? 태그를 삭제할 때 트리거되는 원치 않는 동작이 있으므로 항상 입력이 포커스를 훔치는 것을 원하지 않습니다.

@krozett 의 사용 사례를 설명할 수 있습니까? 현재 구현한 것보다 더 나은 솔루션이 있다고 확신하지만 커서가 _어딘가_ 유용하게 가는 것이 중요하다고 생각합니다. handleDelete/onDelete 콜백에서 커서의 위치를 ​​변경할 수 있는 조건을 추가할 수 있습니다.

@i-like-robots 기능 요청 티켓을 만들면 더 좋을 것 같습니다. 그러나 기본적으로 사용자가 입력을 누르고 오버레이를 사용하여 키보드와 자동 완성 제안을 위한 화면 공간을 허용하기 위해 해당 입력을 제외한 모든 것을 숨기는 모바일 장치와 관련된 동작이 있습니다. 포커스가 있는 요소가 없으면 전체 양식이 표시됩니다. 그러나 태그를 삭제할 때 사용자가 태그만 삭제하고 검색 상자에 계속 입력할 의도가 없기 때문에 입력이 자동으로 초점을 맞추는 것을 원하지 않습니다. 자동 초점은 내가 원하지 않는 "화면 지배" 모드로 입력을 다시 팝하게 만듭니다. 의도적 인 초점 만이 작업을 수행해야합니다.

그것은 의미가 있습니다 @krozett - 아마도 더 나은 해결책은 포커스가 어디에서 왔는지 기록하고( focusin ) 태그가 제거될 때 커서를 그곳으로 되돌리는 것입니다 🤔

@i-like-robot 어쨌든 v6이 곧 출시될 거라 확신합니다. 따라서 먼저 해당 이벤트 핸들러가 필요한 작업을 수행하는지 확인하기 위해 해당 동작을 살펴봐야 합니다. 😉