Cannot select via click if rendered item is an imported Component.

[agonsalves]

If I set the "renderItem" prop to be a component that has been imported, then clicking on the items in the menu does not trigger the onSelect method. The items also do not get isHighlighted on mouse over. Navigating by keyboard does work.

<Autocomplete
                autoHighlight={false}
                className={className}
                getItemValue={item => item.id}
                items={options}
                name={name}
                onChange={this.handleChange}
                onSelect={this.handleSelection}
                renderItem={(item, isHighlighted) =>
                    <DatalistItem
                        key={Math.random()}
                        item={item}
                        isHighlighted={isHighlighted}
                    />
                }
            />

class DatalistItem extends PureComponent {
    render() {
        const {item, isHighlighted} = this.props
        return (
            <DivContainer
                className={isHighlighted ? 'active' : ''}
                children={item.title}
            />
        )
    }
}

[cinan]

Autocomplete uses lots of on* events. Your component has to accept them and pass them through. It means renderInput, renderItem and renderMenu props has to return components aware of this on* events. For example, events used for menu are onClick and onMouseEnter:

react-autocomplete/lib/Autocomplete.js

Line 466 in 46300e9

onClick: this.props.isItemSelectable(item) ?

[agonsalves]

@cinan Thanks. How do I make them aware? The renderItem method only passes two values to the component.

[cinan]

The on* props are injected by Autocomplete library. Example for renderItem (note ...events):

<Autocomplete
  /// ...
  renderItem={(item, highlight) => <Item item={item} highlight={highlight} />}
/>

class Item extends React.Component {
  render() {
    const { item, highlight, ...events } = this.props;
    return (
      <SomeComponent key={item} highlight={highlight} {...events}>{item}</SomeComponent>
    );
  }
}

[agonsalves]

@cinan I just tried exactly that, but there are no event handlers being passed to the component at all.

[glocore]

I'm also facing the same issue. It works when I comment out my onBlur function.
@agonsalves were you able to solve this?

[glocore]

For me, this was happening because I was programmatically toggling the open prop, and due to an implementation detail, open would toggle to false before onSelect. I gave a 100 ms delay to onBlur using setTimeout and that seems to have solved the issue.

[makis-spy]

Hello all. I am facing the same issue, not being able to select and item. I don't have any blur events but my console does lights up with:

**Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

Check the render method of Autocomplete.**

Any thoughts or experience with this?

---

So my issue was two fold: one using function components to return other components and multiple nesting divs inside. In summary I simplified it as much as I could without disrupting the prop flow down

Example : renderItem={Content} where as before it was this convoluted (a,c,v)=>

<Content {...a}/>