В своем проекте я использую DaData для формы:
Код DaData:
useEffect (() => {
function formatResult(value, currentValue, suggestion) {
suggestion.value = suggestion.data.code;
return suggestion.data.code + " — " + suggestion.data.name;
}
function showSuggestion(suggestion) {
$("#place_of_issue").val(suggestion.data.name);
}
function clearSuggestion() {
$("#place_of_issue").val("");
}
console.log($("#code_division").suggestions({
token: token,
type: "fms_unit",
formatResult: formatResult,
onSelect: showSuggestion,
onSelectNothing: clearSuggestion
}))
})
Код первого инпута:
<Controller
control={control}
name="ouCode"
rules={{
required: true,
minLength: {
value: 6,
message: `*Минимум 6 цифры`,
},
}}
render={({ field: { onChange, onBlur, value } }) => (
<>
<IMaskInput type="text" id="code_division" class="input_field m_i_d_s suggestions-input"
mask="000-000" maskChar="_" lazy={false} unmask={true}
onBlur={ (event) => {
onBlur()
}}
onAccept={ (value, mask) => {onChange(value)} }
value={value}
/>
<WarrningError>{ errors?.ouCode && (<p>{ errors?.ouCode?.message ||`*Необходимо заполнить поле "Код подразделения"`}</p>) }</WarrningError>
</>
)}
/>
Код второго инпута:
<input
id="place_of_issue"
className="input_field rus_num"
type="text"
maxLength="255"
data-required="true"
name="pasportnye_dannye[place_of_issue]"
data-index_group=""
placeholder=""
value={placeOfIssue}
/>
<div id="error_place_of_issue" className="help-block hidden">
Необходимо заполнить поле "Паспорт выдан"
</div>
И у меня есть два инпута, в первый я ввожу код подразделения, а во второй инпут у меня автоматически подставляется кем выдан паспорт - это выглядит вот так:
Дело в том, что если что-то ввести в первый инпут - "Код подразделения" и выбрать какую-нибудь подсказку, то вставиться код подразделения и подтянется второй инпут - "Кем выдан паспорт". Но как только пользователь нажимает на какой-нибудь элемент, то есть спадает таргет, значение в первом инпуте остается, а во втором удаляется.