I had this issue but was able to work around it.

In my case I had code like this:

renderItem={(item, isHighlighted) => (
  <MyFunctionalComponent key={item.id} item={item} highlighted={isHighlighted}/>
)}

The problem is that the autocomplete will take the rendered items and apply a ref to them. It calls cloneElement with your rendered item as the element to clone and a ref as an additional property to apply. However, you cannot apply a ref to a functional component (see: https://reactjs.org/docs/refs-and-the-dom.html ). What ended up happening is my refs would be set to null and then later you'd get the error when trying to scroll the highlighted menu item into view (a useful feature).

My solution was simple, though difficult to debug:

renderItem={(item, isHighlighted) => (
  <div key={item.id}>
    <MyFunctionalComponent key={item.id} item={item} highlighted={isHighlighted}/>
  </div>
)}

With this fix the rendered Item can properly a ref applied to it and the issue is avoided. In theory I could have also made MyFunctionalComponent into a non-functional component.

It would be great to at least document this limitation if it can't be avoided.

Uh oh!

Cannot read property 'ownerDocument' of null #287

Description

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions