Нужен совет, как добаить событие onBlur на два тега?

Question

Я для практики пишу поиск стран У меня есть компонента SearchForm, у которой есть input, где и надо вводить названия стран. При каждом вводе срабатывает onChange и выводиться список стран под этим inputом. Этот список состоит из NavLinkов, при нажатии на соответствующий навлинк должна выводиться информация про страну. Но также я хочу, что бы при клике в любое место, кроме формы и самого списка этот список пропадал, для этого я добавил событие onBlur на input и с помощью css скрываю этот список, но изза этого я не могу кликать на сам список, потому что он сразу же исчезает. Можете пожалуйста дать совета, что надо сделать, что б при клике на сам список, он не пропадал Вот код:

import React, { useState } from "react";
import { NavLink } from "react-router-dom";
import { Field, reduxForm } from "redux-form";
import styles from "./SearchPage.module.css";

const Search = (props) => {
    
    let countryList = [];
     let [classes, setClasses] = useState({activeFocusForm: null, activeList: null});
    if (props.countries.length > 0) {
        countryList = props.countries.map((item) => <NavLink to={"/pr"} className={styles.countryItem}>{item.properties.name}</NavLink>)
    } else {
        countryList = <div className={styles.nothingFound}>Nothing found</div>
    }
    const countrySearch = (event, newValue) => {
        props.getCountries(newValue);
        setClasses({activeFocusForm: "focusActive", activeList: "listCountry"})
    }
    
    return (
        <>
            <h1>City Search</h1>
            <div className={styles.searchWrapper}>
                <SearchReduxForm 
                countrySearch={countrySearch} 
                activeFocusForm={classes.activeFocusForm} 
                onBlur={(e) => {
                    debugger
                    setClasses({activeFocusForm: null, activeList: "listCountryDisabled"})
                }} 
                onFocus={() => {setClasses({activeFocusForm: "focusActive", activeList: "listCountry"})}}/>
                <div className={styles[classes.activeList]}>{countryList}</div>
            </div>
        </>
    )
}

const SearchForm = (props) => {
    return (
        <form className={styles.decor} >
            <div className={styles.formInner + " " + styles[props.activeFocusForm]}>
                <Field 
                autocomplete="off" 
                placeholder="Enter the name of the city" 
                component="input" 
                // type="text" 
                name="search" 
                onChange={props.countrySearch} 
                onBlur={props.onBlur} 
                onFocus={props.onFocus}/>
            </div>
            
        </form>
    )
}


const SearchReduxForm = reduxForm({ form: "search" })(SearchForm);
export default Search;

Answer 1

Добавьте setTimeout() с незаметной для пользователя задержкой на событие onBlur.

БЛОГ НА HUSL

Нужен совет, как добаить событие onBlur на два тега?

Ответы (1 шт):