React. Скрыть клавиатуру на моб при скролле результатов поиска

Question

React. Скрыть клавиатуру на моб при скролле результатов поиска

Рейтинг: 0Ответов: 1Опубликовано: 05.05.2023

Кастомный поиск и вывод результатов. Использую код, чтобы отображать/скрывать результаты поиска в зависимости от клика вне инпута или , если клик не по блоку с результатами поиска. Всё работает отлично на дсектопе.

import { useRef, useState, useEffect } from "react";

export const useClickOutside = (initialIsOpen) => {
    const [isOpen, setIsOpen] = useState(initialIsOpen);
    const ref = useRef(null);

    useEffect(() => {
        const handleClickOutside = (event) => {
            if (ref.current && !ref.current.contains(event.target)) {
                setIsOpen(false);
            }
        };
        document.addEventListener("mousedown", handleClickOutside);
        return () => {
            document.removeEventListener("mousedown", handleClickOutside);
        };
    }, [ref]);

    return { ref, isOpen, setIsOpen };
};

...

import { useEffect, useState, useRef } from "react";
import { useClickOutside } from "../inc/outsideClick.js";
const { ref, isOpen, setIsOpen } = useClickOutside(false);
const searchResultsRef = useRef(null);
const [focus, setFocus] = useState(false);

{(isOpen || focus) && Object.keys(searchResult).length > 0 && (
   <div ref={searchResultsRef && ref} className="search-result">
   ...
)}

На моб, все клики так же работают так, как надо. Но клавиатура занимает пол экрана и закрывает 70% результата поиска, мне надо, чтобы при скролле результата поиска клавиатура пряталась.

Я думал прицепиться к ивенту focus / blur инпута поиска

onFocus={() => setFocus(true)}
onBlur={() => setFocus(false)}

Но на айфоне blur не срабатывает при скролле результата, то есть, там мигает курсор в поиске, когда я скроллю. Я думал зацепиться за ивент скролла, но тогда клик на любой раздел в результате поиска сразу сворачивает его, что не верно.

Кто-то знает, как убрать клавиатуру на моб при скролле резов?

javascript reactjs

Источник: Stack Overflow на русском

Answer 1

▲ 0

const searchInputRef = useRef(null);

const hideKeyboardOnScroll = () => {
    const handleScroll = () => {
        if (searchInputRef.current) {
            searchInputRef.current.blur();
        }
        document.removeEventListener("scroll", handleScroll, true);
    };

    document.addEventListener("scroll", handleScroll, true);
};

<input
  ref={searchInputRef}
  ...
/>

<div
  ref={searchResultsRef}
  className="search-result"
  onTouchStart={hideKeyboardOnScroll}
>
  ...
</div>

React. Скрыть клавиатуру на моб при скролле результатов поиска

Ответы