React-autosuggest: Error after React Dom update

[victorpavlenko]

I type and after that I try to highlight use mouse or key down/up
Itsh happend after react update

"react": "^16.0.0-rc.3",
"react-dom": "^16.0.0-rc.3",
"react-autosuggest": "^9.3.2",

I check and itemsContainer is empry in Autowhatever

react-dom.development.js:8305 The above error occurred in the component:
in Autowhatever (created by Autosuggest)
in Autosuggest (at base_field.jsx:96)
in SuggestBaseField (at index.jsx:16)
in div (at index.jsx:12)
in LocationTitleBigField (created by ConnectedField)
in ConnectedField (created by Connect(ConnectedField))
in Connect(ConnectedField) (created by Field)
in Field (at index.jsx:21)
in form (at index.jsx:13)
in div (at index.jsx:12)
in div (at index.jsx:29)
in SearchFormContainer (created by Form(SearchFormContainer))
in Form(SearchFormContainer) (created by Connect(Form(SearchFormContainer)))
in Connect(Form(SearchFormContainer)) (created by ReduxForm)
in ReduxForm (created by Connect(ReduxForm))
in Connect(ReduxForm) (at index.jsx:21)
in div (at index.jsx:12)
in div (at index.jsx:7)
in CenteredContent (at index.jsx:11)
in div (at blue.jsx:8)
in BGBlue (at index.jsx:10)
in SearchFormBlock (at index.jsx:20)
in MediaQuery (at desktop.jsx:6)
in DesktopMediaQuery (at index.jsx:28)
in div (at index.jsx:10)
in BaseLayout (at index.jsx:27)
in div (at require_current_user.jsx:7)
in RequireCurrentUser (at index.jsx:26)
in HomeLayout (at index.jsx:28)
in JobsApplicationContainer (created by Connect(JobsApplicationContainer))
in Connect(JobsApplicationContainer) (created by RouterContext)
in div (at index.jsx:17)
in App (at index.jsx:38)
in AppContainer (created by Connect(AppContainer))
in Connect(AppContainer) (created by RouterContext)
in RouterContext (created by Router)
in Router (at index.jsx:39)
in Provider (at index.jsx:38)

Consider adding an error boundary to your tree to customize error handling behavior.
You can learn more about error boundaries at https://fb.me/react-error-boundaries.
logCapturedError$1 @ react-dom.development.js:8305
captureError @ react-dom.development.js:12993
commitAllWork @ react-dom.development.js:12423
workLoop @ react-dom.development.js:12687
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
performWork @ react-dom.development.js:12800
batchedUpdates @ react-dom.development.js:13244
performFiberBatchedUpdates @ react-dom.development.js:1646
stackBatchedUpdates @ react-dom.development.js:1637
batchedUpdates @ react-dom.development.js:1651
batchedUpdatesWithControlledComponents @ react-dom.development.js:1664
dispatchEvent @ react-dom.development.js:1874
Autowhateve

Autowhatever.js:323 Uncaught TypeError: Cannot read property 'offsetTop' of undefined
at Autowhatever.ensureHighlightedItemIsVisible (Autowhatever.js:323)
at Autowhatever.componentDidUpdate (Autowhatever.js:195)
at commitLifeCycles (react-dom.development.js:11517)
at commitAllLifeCycles (react-dom.development.js:12294)
at HTMLUnknownElement.callCallback (react-dom.development.js:1299)
at Object.invokeGuardedCallbackDev (react-dom.development.js:1338)
at invokeGuardedCallback (react-dom.development.js:1195)
at commitAllWork (react-dom.development.js:12415)
at workLoop (react-dom.development.js:12687)
at HTMLUnknownElement.callCallback (react-dom.development.js:1299)

[choelterati]

Same issue. I've been implementing react-autosuggest after package updates for react and react-dom that are version ^16.

[igorrmotta]

I fixed the problem passing containerProps to the element in renderSuggestionsContainer

                renderSuggestionsContainer={(options) => (
                    <Paper {...options.containerProps} square={true}>
                        {options.children}
                    </Paper>
                )}

[moroshko]

Could you create a Codepen that reproduces the issue, please?

[Rockin4Life33]

@moroshko I'm having the same issue here is a codesandbox link that duplicates the issue.

[gazpachu]

@igorrmotta @moroshko @Anovative I also have this error when using my own Paper component (instead of the MUI one). If I use the original MUI Paper component then it works fine.

I'm using the latest version: 9.3.4

Autowhatever.js?ae85:323 Uncaught TypeError: Cannot read property 'offsetTop' of undefined
    at Autowhatever.ensureHighlightedItemIsVisible (Autowhatever.js?ae85:323)
    at Autowhatever.componentDidUpdate (Autowhatever.js?ae85:195)
    at commitLifeCycles (react-dom.development.js?cada:14370)
    at commitAllLifeCycles (react-dom.development.js?cada:15463)
    at HTMLUnknownElement.callCallback (react-dom.development.js?cada:100)
    at HTMLUnknownElement.fn.___hb (honeybadger.js?b6c9:383)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?cada:138)
    at invokeGuardedCallback (react-dom.development.js?cada:187)
    at commitRoot (react-dom.development.js?cada:15604)
    at completeRoot (react-dom.development.js?cada:16619)

import React from 'react';
import styled from 'styled-components';

const Container = styled.div`
  background-color: white;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
`;

const Paper = (props) => {
  console.log(props);

  return (
    <Container {...props}>
      {props.children}
    </Container>);
};

export default Paper;

function renderSuggestionsContainer(options) {
  const { containerProps, children } = options;

  return (
    <Paper {...containerProps} square>
      {children}
    </Paper>
  );
}

I've also tried to create a simple wrapper around the MUI Paper component but still got the same error:

import React from 'react';
import { Paper as MDPaper } from '@material-ui/core';

const Paper = props => (
  <MDPaper {...props}>
    {props.children}
  </MDPaper>
);

export default Paper;

Any idea of why it works well with the original MUI Paper component but not with the wrapper or my own Paper component?

[stephenrs]

I ran into the same problem and after looking around in the AutoWhatever.js code a bit I realized I could fix it by modifying the example code from the readme: https://github.com/moroshko/react-autosuggest#rendersuggestionscontainer-optional

Instead of:

const callRef = isolatedScroll => {
    if (isolatedScroll !== null) {
      ref(isolatedScroll.component);
    }
  };

I use this:

const callRef = muiThemeProvider => {
    if (muiThemeProvider !== null) {
        ref(muiThemeProvider._reactInternalInstance._renderedComponent);
    }
};

In my case I am using the MuiThemeProvider composite component which doesn't have a "component" attribute as shown in the example. The solution works, but is a bit ugly and likely to break at some point, so maybe there's a more general solution(?)

[RickCardoso]

@gazpachu , you can use your own Paper component, just wrap it with a simple div and pass the containerProps to it.

<div {...options.containerProps}>
  <Paper ...>
    {options.children}
   ...
  </Paper>
</div>

[pm0u]

I was running into this issue because i was also putting a ref on the container:

    <div
      {...containerProps}
      ref={containerRef}
    >

Probably worth noting that this will break everything. It could sort of be inferred from this:

When renderSuggestionsContainer returns a composite component (e.g. as opposed to a DOM node like

), you MUST call containerProps.ref with the topmost element that the composite component renders.

but it might be best to say it more explicitly (I overlooked this because i did not think it applied to my use case at all)

edit --

I was also having trouble utilizing the ref for my purposes as I would have expected:

const { ref: containerRef } = containerProps

useEffect(() => {
  console.log(containerRef) // always undefined
},[])

return <div {...containerProps} ref={containerRef} ... />

ended up doing the following

const containerRef = useRef()

useEffect(() => {
  console.log(containerRef) // it's there now
},[])

return    <div
      {...containerProps}
      ref={(divEl) => {
        containerRef.current = divEl
        containerProps.ref(divEl)
      }}