Open victorpavlenko opened 6 years ago
Same issue. I've been implementing react-autosuggest after package updates for react and react-dom that are version ^16.
I fixed the problem passing containerProps
to the element in renderSuggestionsContainer
renderSuggestionsContainer={(options) => (
<Paper {...options.containerProps} square={true}>
{options.children}
</Paper>
)}
Could you create a Codepen that reproduces the issue, please?
@moroshko I'm having the same issue here is a codesandbox link that duplicates the issue.
@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?
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(?)
@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>
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)
}}
I type and after that I try to highlight use mouse or key down/up Itsh happend after react update
I check and itemsContainer is empry in Autowhatever