Trying to Use : useCombobox props inside of React-bootstrap's Modal, fires errors on the console :
downshift: You forgot to call the getInputProps getter function on your component / element.
downshift: You forgot to call the getMenuProps getter function on your component / element.
downshift: The ref prop "undefined" from getInputProps was not applied correctly on your element.
downshift: The ref prop "undefined" from getMenuProps was not applied correctly on your element.
Even though that the Form works eventually without problem, but i think the issue lies in the fact that upon loading the page, the modal is not rendered like other components, and with that in mind, at first the console thinks that i just declared a useCombobox but never used its props, not until it renders the modal which is a react-bootstrap component, that it finally recognizes the props being called, but by that time it's too late, the errors are printed in the console, even though that the Controller works fine and the props are working properly.
const {
getInputProps: getInputPropsTag,
getItemProps: getItemPropsTag,
getMenuProps: getMenuPropsTag,
openMenu: openMenuTag,
isOpen: isOpenTag
} = useCombobox({
items: __itemsTags,
onInputValueChange({ inputValue }) { _handleChangeTag(inputValue) },
onSelectedItemChange: ({ selectedItem: __selectedItem }) => _handleSelectTag(__selectedItem),
itemToString: item => (item ? item.value : '')
});
<Modal className='_blogModal' show={_showModal} onHide={() => setShowModal(false)} centered>
<Modal.Header closeButton>
<Modal.Title className='d-flex'>
<Dropdown
show={_showFilterDropdown}
onMouseEnter={() => {
setShowFilterDropdown(true);
}}
onMouseLeave={() => setShowFilterDropdown(false)}
>
<Dropdown.Toggle as='span'></Dropdown.Toggle>
<Dropdown.Menu className='border-0 border-top rounded-0'>
<Form className='d-flex flex-column'>
<Dropdown.Item as='span' eventKey='4'>
<Controller
name='_tagInput'
control={control}
render={({ field }) => (
<Form.Group
controlId='_tagInput'
className={`_formGroup _searchGroup ${_tagFocused || !_.isEmpty(field.value) ? 'focused' : ''}`}
>
<FloatingLabel
label='Tags.'
className='_formLabel _autocomplete'
>
<FontAwesomeIcon icon={faHashtag} />
<Form.Control
{...getInputPropsTag({
...field,
onFocus: _handleFocusTag,
onBlur: _handleBlurTag
})}
placeholder='Tags.'
autoComplete='new-password'
type='text'
className={`_formControl border border-0 rounded-0 ${!_.isEmpty(_typedCharactersTag) ? '_typing' : ''}`}
name='_tagInput'
/>
</FloatingLabel>
<SimpleBar className='_SimpleBar' style={{ maxHeight: '40vh' }} forceVisible='y' autoHide={false}>
<ListGroup
className='border border-0 rounded-0 d-block'
{...getMenuPropsTag()}
>
{
isOpenTag &&
_.map(
__itemsTags
, (item, index) => {
return (
<ListGroup.Item
className='border border-0 rounded-0 d-flex align-items-center'
{...getItemPropsTag({
key: index,
index,
item
})}
>
<FontAwesomeIcon icon={faHashtag} className='me-2' />
{item.value}
</ListGroup.Item>
)
}
)
}
</ListGroup>
</SimpleBar>
</Form.Group>
)}
/>
</Dropdown.Item>
</Form>
</Dropdown.Menu>
</Dropdown>
</Modal.Title>
</Modal.Header>
</Modal>
You should be able to solve this problem by moving
<Dropdown>and everything within it to it's own component.