Skip to content
This repository has been archived by the owner on Jul 19, 2019. It is now read-only.

Cannot read property 'ownerDocument' of null #287

Closed
ly-tc opened this issue Oct 18, 2017 · 6 comments
Closed

Cannot read property 'ownerDocument' of null #287

ly-tc opened this issue Oct 18, 2017 · 6 comments

Comments

@ly-tc
Copy link

ly-tc commented Oct 18, 2017

I see that it already fixed in 1.4.2 but now 1.7.2 this error popup again!

@ma-pe
Copy link

ma-pe commented Oct 25, 2017

same here.

SkinyMonkey added a commit to SkinyMonkey/react-autocomplete that referenced this issue Nov 2, 2017
@JorisPhilipsen
Copy link

I have this problem as well, can someone merge this please?

@Slogo
Copy link

Slogo commented Nov 15, 2017

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.

@CMTegner
Copy link
Collaborator

This is already documented in props.renderMenu:

Ensure the returned tree includes every entry in items or else the highlight order and keyboard navigation logic will break.

Please open a new ticket with a detailed explanation if you're experiencing problems that aren't covered in the documentation.

@avindra
Copy link

avindra commented Feb 27, 2019

@CMTegner is there a plan to support limiting the list size? I think #374 is going for a similar ask.

When lists have hundreds of items, it quickly becomes unusable as the browser struggles to render the list

@avindra
Copy link

avindra commented Feb 27, 2019

@CMTegner that should be called out a bit more clearly in the docs... totally glazed over that sentence. Are you open to a PR for a doc fix?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants