While incorporating react-beautiful-dnd into my project, I faced an issue where the dragged item is initially positioned incorrectly in one of the lists. There is a brief delay before it jumps to its correct position.
You can see the problem in action by following this link: Link to issue
After dropping the item into a list, it readjusts itself to fit within the div.
Below is the code snippet for the item:
import React, { useState } from "react";
import styled from "styled-components";
import { Draggable } from "react-beautiful-dnd";
// Remaining code for the item here
The code for the list is as follows:
import React, { useState } from "react";
import styled from "styled-components";
import Ticket from "./Ticket";
import { Droppable } from "react-beautiful-dnd";
// Remaining code for the list here
I have experimented with flexbox styling and adjusting margin and padding properties. Removing margin and padding seems to eliminate the issue, but all examples in beautiful-dnd showcase spacing between items without any delays. Any suggestions on how to resolve this?