"Uncaught TypeError: Cannot read property 'ownerDocument' of null" on Chrome with custom renderMenu

[myyc]

Hi,

not sure if this is the right place to report it, I figured you'd be able to give me a hand. My renderMenu looks like this:

    renderMenu(items: any[]) {
        if (items.length <= 10) {
            return <div children={items} />;
        } else {
            return <div />;
        }
    }

as I expect to have a ton of results (typically they shrink as the user types 2-3 letters).

when I type the letter "n" (?????) the whole thing crashes on Chrome giving these error messages:

    at getClientPosition (util.js:5)
    at getOffset (util.js:68)
    at Object.offset (util.js:370)
    at scrollIntoView (dom-scroll-into-view.js:18)
    at Autocomplete.maybeScrollItemIntoView (Autocomplete.js:113)
    at Autocomplete.componentDidUpdate (Autocomplete.js:92)
    at commitLifeCycles (react-dom.development.js:9776)
    at commitAllLifeCycles (react-dom.development.js:11439)
    at HTMLUnknownElement.callCallback (react-dom.development.js:104)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:142)
getClientPosition @ util.js:5
getOffset @ util.js:68
offset @ util.js:370
scrollIntoView @ dom-scroll-into-view.js:18
maybeScrollItemIntoView @ Autocomplete.js:113
componentDidUpdate @ Autocomplete.js:92
commitLifeCycles @ react-dom.development.js:9776
commitAllLifeCycles @ react-dom.development.js:11439
callCallback @ react-dom.development.js:104
invokeGuardedCallbackDev @ react-dom.development.js:142
invokeGuardedCallback @ react-dom.development.js:191
commitRoot @ react-dom.development.js:11578
completeRoot @ react-dom.development.js:12475
performWorkOnRoot @ react-dom.development.js:12425
performWork @ react-dom.development.js:12343
flushInteractiveUpdates @ react-dom.development.js:12578
batchedUpdates @ react-dom.development.js:1955
dispatchEvent @ react-dom.development.js:4279
interactiveUpdates @ react-dom.development.js:12565
interactiveUpdates @ react-dom.development.js:1962
dispatchInteractiveEvent @ react-dom.development.js:4256

I really have no idea what the issue is... any clues?

Edit: implicitly mentioned, works fine on other browsers.

Edit 2: worth noting that this works

    renderMenu(items: any[]) {
        return <div children={items} />;
    }

[myyc]

For the record, this fixes it:

return <div style={{...style, ...{visibility: items.length > 10 ? "hidden" : "visible"}}} children={items} />;

It's not the same but it's probably fine. Not sure if you have a clue why the earlier version doesn't work.

[Prophet32j]

I ran into this about an hour ago, and I narrowed it down to me modifying what is rendered in the div. I added pagination to my autocomplete, and I was going to render a loading spinner when the user pages. First page would render, then when I clicked the button, the component would bomb like yours did. I removed my rendering logic around the loading and just awaited the promise to render the new page of results, and all was well.

This was a new one for me. If you find out the problem, please document it so maybe I can re-add my loading spinner.

[myyc]

Not really. I am still using the workaround :)

[torgeir]

I'm also seeing this one if I change what appears in the menu after it has already, e.g to change the rendered menu from a list of items to the text Loading.. while a new search is in place.

[jljacques]

+1

[hyanmandian]

Check #287