ReactJS - запуск события Click Click перед onBlur

Question

Я реализую пользовательский элемент ввода, похожий на React Select. Пользователи смогут вводить что-то в элемент ввода и выбирать предложение из раскрывающегося списка (в моем случае я реализовал компонент с именем SuggestionList, который служит той же цели, что и раскрывающийся список предложений).

В настоящее время SuggestionList - это родственный компонент React для элемента ввода, в который вводит пользователь (я назвал его CustomInput).

Я хочу, чтобы OffertionList исчезал, когда CustomInput теряет фокус, поэтому я реализовал обработчик onBlur, который делает SuggestionList либо не монтируемым, либо для свойства "display" CSS установлено значение none. Однако проблема в том, что после исчезновения OffertionList его обработчик события onClick / handleClick не вызывается, и этот обработчик событий отвечает за добавление выбранных пользователем элементов в список выбранных элементов.

Код показан ниже. После этого кода есть более подробное объяснение.

const AutocompleteInput = ({...}) => {
    const [suggestionVisible, setSuggestionVisible] = useState(true);

    return (
    ....
    <SystemComponent position="relative">
        <SuggestionList p={theme.space[4]} 
            position="absolute" 
            visible={suggestionVisible}
            value={value} 
            handleClick={handleSelect}
            ref={suggestionBox}
        />
        <CustomInput 
            variant="text" 
            placeholder={placeholder}
            value={value}
            onChange={(evt) => handleInputChange(evt.target.value)}
            onKeyDown={handleKeyDown}
            onFocus={ () => {setSuggestionVisible(true)} }
            onBlur={ () => {setSuggestionVisible(false);} }
        />
    </SystemComponent>
    ....
    )

}

Поэтому, когда пользователь щелкает что-то в списке OffertionList, мой CustomInput сразу же теряет фокус, в результате чего SuggestionList либо отключается, либо исчезает, и, следовательно, его обработчик событий isn ' т называется. В результате элемент, который выбирает пользователь, не добавляется в список предложений.

С учетом сказанного я по-прежнему хочу, чтобы OffertionList исчезал, когда пользователь щелкает какую-то другую часть веб-сайта, в результате чего CustomInput теряет фокус. Есть предложения?

Answer 1

Допустим, вы звоните onClickHandler() внутри вашего onClick. Вы можете вызвать это внутри функции onBlur.

Например

onBlur={ () => {onClickHandler(); setSuggestionVisible(false);} }