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. <IsolatedScroll ... /> as opposed to a DOM node like <div ... />), 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)
      }}