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 <Autowhatever> 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)
      }}