[BUG] Weird scrolling behavior with react-beautiful-dnd

[loun4]

Describe the bug Dragging items to the bottom of the list causes strange scrolling behavior

Reproduction https://codesandbox.io/s/react-virutoso-with-react-beautiful-dnd-forked-pslfr?file=/src/index.js

Screenshots

https://user-images.githubusercontent.com/1511512/128223648-dba6f815-cadc-44a1-9902-f64296693d67.mov

Desktop (please complete the following information):

• OS: Mac OS 11.5.1.
• Browser: Browser Chrome 92

[loun4]

Any suggestion or workaround to fix that ?

[petyosi]

I think the problem lies somewhere in the sample itself (rather than the library), probably the way the placeholder is calculated.

[loun4]

Another sample based on the official one (https://virtuoso.dev/react-beautiful-dnd/) : https://codesandbox.io/s/react-virutoso-with-react-beautiful-dnd-bug-wgtmq?file=/src/index.js

We don't understand why this only happens when items are dragged to the bottom.

https://user-images.githubusercontent.com/1511512/129692686-ee29ed62-be69-48e5-b5e0-d85f5adae3a4.mov

[petyosi]

Feel free to examine the DOM structure and see what causes the flickering. I am unlikely to get to debugging that anytime soon.

[Guiw5]

have you tried adding an extra height to those container divs?

[Harshit369]

@loun4 were you able to control it somehow? it only happens when you drag something to the end of any other column. doesn't happen in the same one.

[OleksandrEmpeek]

I had this problem too, the solution for me was to add {provided.placeholder} to the end of the Droppable container

<Droppable droppableId={`${status.Id}`}>
  {provided => {
    const columnFind = columns.find(column => column.statusId === status.Id);

    return (
      <div
        ref={provided.innerRef}
        className={classNames(styles.tasksList, {
          [styles.emptyColumn]: !columnFind?.tasks.length,
        })}
        {...provided.droppableProps}
      >
        {buildTasks(columnFind)}
        {provided.placeholder}
      </div>
    );
  }}
</Droppable>

[Aditi0505]

Hey, any solution to this? It is only happening for the bottom most element. My hunch is since the virtual list has it as the last element, it is unable to remove the top item and change indexes accordingly and css transition is not applied. Can someone please help?

PS: I tired using provided.placeholder but apparently, virtual lists doesn't require one.

[zhangxuanou]

嘿嘿，这个问题有什么解决办法吗？它只发生在最底部的元素上。我的预感是，由于虚拟列表将其作为最后一个元素，因此无法删除顶部项目并相应地更改索引，并且不应用 css转换。有人可以帮忙吗？

PS：我厌倦了使用provided.placeholder，但显然，虚拟列表不需要它。

I want to ask if you have solved this problem?