From 6a3002ddf90ddaee07569f0dbcd028f75cf21390 Mon Sep 17 00:00:00 2001
From: Tom Avalexing <nickmyalex@gmail.com>
Date: Tue, 10 Oct 2023 17:25:06 +0300
Subject: [PATCH] Fix dnd on Options->Fields dropdown. (#1921)

fix dnd
---
 .../modules/ui/draggable-list/components/DraggableList.tsx  | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/front/src/modules/ui/draggable-list/components/DraggableList.tsx b/front/src/modules/ui/draggable-list/components/DraggableList.tsx
index 64310e899b..6f6d4572e5 100644
--- a/front/src/modules/ui/draggable-list/components/DraggableList.tsx
+++ b/front/src/modules/ui/draggable-list/components/DraggableList.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import styled from '@emotion/styled';
 import {
   DragDropContext,
@@ -5,7 +6,6 @@ import {
   OnDragEndResponder,
 } from '@hello-pangea/dnd';
 import { v4 } from 'uuid';
-
 type DraggableListProps = {
   draggableItems: React.ReactNode;
   onDragEnd: OnDragEndResponder;
@@ -19,10 +19,12 @@ export const DraggableList = ({
   draggableItems,
   onDragEnd,
 }: DraggableListProps) => {
+  const [v4Persistable] = useState(v4());
+
   return (
     <DragDropContext onDragEnd={onDragEnd}>
       <StyledDragDropItemsWrapper>
-        <Droppable droppableId={v4()}>
+        <Droppable droppableId={v4Persistable}>
           {(provided) => (
             <div ref={provided.innerRef} {...provided.droppableProps}>
               {draggableItems}