Всем привет, не понимаю почему не работает форма внутри react-select в components.MenuList и как заставить ее работать?
На странице есть следующий select
return (
<Select
{...props}
ref={selectRef}
menuIsOpen={true}
openMenuOnFocus
onChange={onChange}
options={data}
classNames={{
control: () => stylesSelect.hideControl,
container: () => stylesSelect.container,
indicatorsContainer: () => stylesSelect.indicator,
menu: () => stylesSelect.menu,
menuList: () => [
stylesSelect.menuList,
stylesSelect.paddingBottom,
stylesSelect.btl,
stylesSelect.btr,
stylesSelect.bbl,
stylesSelect.bbr,
stylesSpecial.scrolling,
stylesDownload.height
].join(" "),
option: () => stylesSelect.option,
group: () => stylesSelect.group,
groupHeading: () => stylesSelect.groupHeading
}}
menuPlacement={"auto"}
menuShouldBlockScroll={false}
isClearable={true}
isSearchable={false}
hideSelectedOptions={false}
components={{
DropdownIndicator: () => null,
IndicatorSeparator: () => null,
Placeholder: () => null,
MenuList: ({ ...props }) => (
<components.MenuList {...props}>
<div>
<form onSubmit={handleSubmit(onSubmit)}>
<input
data-tooltip-id="tooltip-size"
type="number"
aria-invalid={errors.size ? "true" : "false"}
defaultValue={sizeState}
{...register("size", {
required: {
value: false,
},
min: {
value: 40
},
max: {
value: 3360
}
})}
/>
<button type="submit">Submit</button>
</form>
</div>
<div>{props.children}</div>
</components.MenuList>
),
Menu: ({ ...props }) => (
<components.Menu {...props}>
<div>{props.children}</div>
</components.Menu>
)
}}
/>
)
Вверху перед списком мне нужно вывести дополнительную форму с выбором размера (size), она не привязана к самому select, просто обычная форма с дополнительным обработчиком, которую попросту необходимо разместить в блоке со списком.
Проблема в том что сам input в форме не активен, как будто фокус теряется и при попытки ввода цифр ничего не происходит, как заставить его работать?
