Поведение фокуса выпадающего списка пользовательского интерфейса без заголовка
Я использую поле со списком безголового пользовательского интерфейса в качестве панели поиска автозаполнения (приложение React/Remix). Я хотел бы, чтобы панель поиска теряла фокус после отправки поиска.
На некоторых устройствах (например, iPhone Safari) это делается по умолчанию; однако на рабочем столе Chrome я получаю совсем другое поведение. Поле со списком перефокусируется, и я не могу понять, когда и почему он это делает, поэтому я не могу вручную размыть его в useEffect.
Все, что я мог сделать, чтобы взломать его, это размыть полосу на setTimeout.
Ответы 2
Я столкнулся с похожей проблемой и нашел решение, которое может быть не самым элегантным, но оно работает.
Во-первых, я добавил ссылку на элемент ввода ComboBox и использовал setTimeout с задержкой 0, чтобы размыть его:
const handleChangeEvent = (event) => {
// other stuff
setTimeout(() => {
searchRef.current.blur()
}, 0)
}
// a structure like this
<ComboBox onChange = {handleChangeEvent}>
<Combobox.Input ref = {searchRef} />
</ComboBox>Это отлично работало для ввода с клавиатуры, но я заметил, что когда я нажимал на ComboBox, он сразу фокусировался, а затем размывался из-за setTimeout, создавая заметный эффект мигания. Чтобы исправить это, я добавил событие onMouseDown в ComboBox и вызвал preventDefault(), чтобы предотвратить фокусировку ввода:
<Combobox.Options
onMouseDown = {(e) => {
e.preventDefault()
}}
/>Как вы сказали, это немного хакерски, но это работает, и после нескольких часов работы над ним лучше работать, чем не работать, плюс мне не платят, поэтому никто все равно не будет смотреть на код.
Спасибо, что заглянули в мой пост! Да, я просто установил Timeout с задержкой 200 и не нуждался в onMouseDown, но я думаю, что ваше решение мне нравится больше! Хотелось бы узнать, знает ли кто-нибудь немного больше о том, что происходит под капотом безголового пользовательского интерфейса. Кажется, он делает многое, о чем он не говорит нам в документах.
просто измените этот метатег в заголовке вашего сайта
<meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
В качестве примечания кажется, что при повторном применении фокуса в некоторых браузерах (например, сафари) курсор переходит в конец, как и следовало ожидать, но в других (например, хром) курсор переходит в начало ввода