Dragging a column fails with forwardRef unavailable

[Cameron Johnson]

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

[Cameron Johnson]

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

[Shpileva Yuliya]

Hi, @CamJohnson26

I can't reproduce this issue. Could you update this example to make it reproducible?

[Cameron Johnson]

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

[Cameron Johnson]

@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

https://codesandbox.io/s/focused-meadow-higv2s

[Shpileva Yuliya]

@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?

[Cameron Johnson]

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.

[Shpileva Yuliya]

@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.