Use with react-beautiful-dnd

Hi @petyosi ! Great work on the library, especially the simple auto-calculation of the rows. I am trying to implement it with react-beautiful-dnd. I haven’t been able to so far, do you see any reason why it couldn’t be implemented? Here’s a codesandbox. If you help me maybe, we could also add this as a showcase in your examples? Thanks in advance!

[exentrich]

@itayganor It’s expected behavior. This examples doesn’t have logic for persisting a reorder. They are just bare minimal examples to show how to integrate them with react-virtuoso. Check docs of sortable-hoc or beatiful-dnd to find out how to persist reorder

[exentrich]

I did it!! Here working example https://stackblitz.com/edit/react-bdax3i

When item is dragged in react-beautiful-dnd it removed from DOM, so all items above jump and break positioning. It’s known bug https://github.com/atlassian/react-beautiful-dnd/issues/1694

We can easily fix it:

1. In ItemContainer

<div {...etc} style={{'--data-known-size': this.props['data-known-size']+'px'}}>

1. Anywhere else

<style dangerouslySetInnerHTML={{__html: `
  [data-known-size]:empty {
    height: var(--data-known-size)
  }
`}} />