Dragging a column fails with forwardRef unavailable
CamJohnson26 opened this issue · comments
Is there an existing issue for this?
- I have searched this repository's issues and believe that this is not a duplicate.
I'm using ...
React Grid
Current Behaviour
<GroupingPanel
showGroupingControls
emptyMessageComponent={GroupingPanelEmptyMessage}
containerComponent={({ children, forwardedRef }) => (
<GroupingPanel.Container
children={children}
forwardedRef={forwardedRef}
/>
)}
/>
is throwing an error when I begin dragging a column:
Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
I've researched and believe this is the same problem as #3525, but when using typescript the forwardedRef is not working. I've tested it and I get the error with or without providing the containerComponent.
Expected Behaviour
Dragging columns should work without throwing an error
Steps to Reproduce
Add a DragAndDropProvider to a VirtualTable, and a GroupingPanel similar to:
<GroupingPanel
showGroupingControls
emptyMessageComponent={<>Some Text Goes Here</>}
containerComponent={({ children, forwardedRef }) => (
<GroupingPanel.Container
children={children}
forwardedRef={forwardedRef}
/>
)}
/>
Try dragging a column, note an error is thrown.
Environment
- devextreme-reactive: 3.0.5
- react: 17.0.2
- browser: brave, latest
- bootstrap: none
- react-bootstrap: none
- material-ui: 5.10.2
Adding the forwardedRef prop to the emptyMessageComponent makes the error go away, but still fails the typechecks. I've made a temporary workaround with:
const emptyMessageWrapper = ({
forwardedRef,
}: {
forwardedRef: LegacyRef<HTMLDivElement>;
}) => <div ref={forwardedRef}>Empty Message Updated</div>;
return (
<GroupingPanel
showGroupingControls
emptyMessageComponent={
// Needed because of a bug in devextreme
(emptyMessageWrapper as unknown) as ComponentType<GroupingPanel.EmptyMessageProps>
}
/>
)
Hi, @CamJohnson26
I can't reproduce this issue. Could you update this example to make it reproducible?
Hi @Krijovnick, the main problem is that forwardedRef
isn't included in the type GroupingPanelProps.emptyMessageComponent
, so even though it's available and usable Typescript thinks there is an error.
To recreate, just add this component to any Typescript component and verify that forwardedRef
raises a Typescript error
<GroupingPanel
showGroupingControls
emptyMessageComponent={({children, forwardedRef}) => {
return <></>
}} />
Looks like the code sandbox you linked isn't typescript
@Krijovnick Ok I edited the code sandbox to at least show the original error, but that can be fixed by passing the forwardedRef to the component in javascript, just won't work in Typescript
@CamJohnson26 In your example, everything works well. As far as I understand, it is not working with typescript. Could you prepare an example in typescript that reproduces the issue?
Might only be an issue in Brave Browser then, but the example I edited throws an error if I delete the groups and then drag a column. Not sure if I’ll have a chance to make a full Typescript example but the workaround I posted works for now.
@CamJohnson26 I reproduced the issue. You need to pass the forwardedRef
to the div element, as you mention above. Regarding the typescript error, we will fix it in the near future.