Bug with drop and drag column group

[armandkeller]

• [x ] I have searched this repository's issues and believe that this is not a duplicate.

I'm using ...

• [x ] React Grid
• [ ] React Chart
• [ ] React Scheduler

Current Behaviour

Since the update 3.0.0, when I want to drop and drag group columns with GroupingPanel and his properties containerComponent, emptyMessageComponent, there is a bug

Expected Behaviour

no bug when drop and drag with GroupingPanel and his properties containerComponent, emptyMessageComponent

note: with the 2.7.6 update, no problem

Steps to Reproduce

https://codesandbox.io/embed/intelligent-grass-hgj7h8?fontsize=14&hidenavigation=1&theme=dark

Screenshots

Environment

• devextreme-reactive: 3.0.1
• react: 17.0.2
• browser: chrome 98.0.4758.82
• bootstrap: none
• react-bootstrap: none
• material-ui: none

[Krijovnick]

@armandkeller You need to pass the forwardedRef property to GroupPanel.Container:

...
containerComponent={({ children, forwardedRef }) => (
    <GroupingPanel.Container
          style={{ width: "auto", marginRight: "10px" }}
          children={children}
          forwardedRef={forwardedRef}
    />
)}
...

Unfortunately, this property is not included in the documentation. We will add it in the near future.

[armandkeller]

@Krijovnick Thank you very much :)