You forgot to call the getInputProps getter function on your component / element.

[ThranduilUrM0m]

• downshift version: 8.1.0
• node version: 18.7.0
• npm (or yarn) version: 7.0.5

Relevant code or config

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>

What you did:
Using useCombobox props inside of Modal

What happened:
the Form works but the console shows these errors :

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.

Problem description:
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.

[Silviu Alexandru Avram]

We may need a prop similar to suppressRefError to handle this case. I think it's worthwhile to have it.

[Dalin Huang]

I'm having the same issue, do we have a release to including a fix or a workaround? Thank you!

[SpookyJelly]

Stuck on the same issue too. I've tried the alternatives listed in the previous issue, but I keep getting this error, which is quite painful.

[Silviu Alexandru Avram]

@ThranduilUrM0m @dalindev @SpookyJelly I just checked our useCombobox API and we do have the suppressRefError prop for both getInputProps and getMenuProps.

Can you please call you getter props with the prop true? In the example above it should be something like:

{...getInputPropsTag({
   ...field,   
   onFocus: _handleFocusTag,
   onBlur: _handleBlurTag
}, {suppressRefError: true)}

You can also do the same for getMenuProps. Just remember, those checks are there for a reason, as the hook needs both getter props to be called in order for things to work.

[Silviu Alexandru Avram]

Will be closing this, but please re-open if it still does not work. Thanks!

[Fatemeh Karimi]

For me, the cause for this error was conditional rendering of the tag.
I convert it from
{isOpen && <input className={clsx(styles.Input)} {...getInputProps()} />}

to
<input className={clsx(styles.Input, { [styles.IsHidden]: !showPlaceholder, })} {...getInputProps()} />