fix: Draggable fixes

techmatters · Sep 7, 2023 · f1d0b89 · f1d0b89
1 parent cab8a8c
commit f1d0b89
Showing 1 changed file with 51 additions and 33 deletions.
diff --git a/src/sharedData/visualization/components/VisualizationConfigForm/AnnotateStep.js b/src/sharedData/visualization/components/VisualizationConfigForm/AnnotateStep.js
@@ -82,6 +82,22 @@ const FORM_FIELDS = [
   },
 ];
 
+// Work around for react-beautiful-dnd issue. See: https://stackoverflow.com/a/75807063
+const StrictModeDroppable = ({ children, ...props }) => {
+  const [enabled, setEnabled] = useState(false);
+  useEffect(() => {
+    const animation = requestAnimationFrame(() => setEnabled(true));
+    return () => {
+      cancelAnimationFrame(animation);
+      setEnabled(false);
+    };
+  }, []);
+  if (!enabled) {
+    return null;
+  }
+  return <Droppable {...props}>{children}</Droppable>;
+};
+
 const DataPoints = props => {
   const { t } = useTranslation();
   const { value, onChange } = props.field;
@@ -167,50 +183,52 @@ const DataPoints = props => {
         onDragEnd={onDragEnd}
         onBeforeCapture={() => setDragging(true)}
       >
-        <Droppable droppableId="droppable-list">
+        <StrictModeDroppable droppableId="droppable-list">
           {provided => (
             <List
               aria-labelledby="data-points-description"
               ref={provided.innerRef}
               {...provided.droppableProps}
             >
               {dataPoints.map((dataPoint, index) => (
-                <Draggable
-                  key={dataPoint.column}
-                  draggableId={dataPoint.column}
-                  index={index}
-                >
-                  {(provided, snapshot) => (
-                    <ListItem
-                      ref={provided.innerRef}
-                      {...provided.draggableProps}
-                      {...provided.dragHandleProps}
-                    >
-                      <ListItemAvatar>
-                        <DragHandleIcon />
-                      </ListItemAvatar>
-                      <OutlinedInput
-                        inputProps={{
-                          'aria-label': t(
-                            'sharedData.form_step_annotate_data_points_input_label',
-                            {
-                              index: index + 1,
-                            }
-                          ),
-                        }}
-                        fullWidth
-                        placeholder={dataPoint.column}
-                        value={dataPoint.label || ''}
-                        onChange={onLabelChange(index)}
-                      />
-                    </ListItem>
-                  )}
-                </Draggable>
+                <React.Fragment key={dataPoint.column}>
+                  <Draggable
+                    key={dataPoint.column}
+                    draggableId={dataPoint.column}
+                    index={index}
+                  >
+                    {(provided, snapshot) => (
+                      <ListItem
+                        ref={provided.innerRef}
+                        {...provided.draggableProps}
+                        {...provided.dragHandleProps}
+                      >
+                        <ListItemAvatar>
+                          <DragHandleIcon />
+                        </ListItemAvatar>
+                        <OutlinedInput
+                          inputProps={{
+                            'aria-label': t(
+                              'sharedData.form_step_annotate_data_points_input_label',
+                              {
+                                index: index + 1,
+                              }
+                            ),
+                          }}
+                          fullWidth
+                          placeholder={dataPoint.column}
+                          value={dataPoint.label || ''}
+                          onChange={onLabelChange(index)}
+                        />
+                      </ListItem>
+                    )}
+                  </Draggable>
+                </React.Fragment>
               ))}
               {dragging && provided.placeholder}
             </List>
           )}
-        </Droppable>
+        </StrictModeDroppable>
       </DragDropContext>
     </>
   );