From 4f84443a47d0eb516f2faa766a6be49b02a862f9 Mon Sep 17 00:00:00 2001
From: Rostislav Wolny <rosta.wolny@automattic.com>
Date: Fri, 7 Jun 2024 15:56:49 +0200
Subject: [PATCH] Fix drag and drop for options for custom select and radio
 options

This regression was introduced long ago when we switched to react 18.
More details here
https://medium.com/@wbern/getting-react-18s-strict-mode-to-work-with-react-beautiful-dnd-47bc909348e4
[MAILPOET-6054]
---
 .../blocks/custom-radio/settings-preview.jsx  |  3 ++-
 .../utils/strict-mode-droppable.tsx           | 21 +++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 mailpoet/assets/js/src/form-editor/utils/strict-mode-droppable.tsx

diff --git a/mailpoet/assets/js/src/form-editor/blocks/custom-radio/settings-preview.jsx b/mailpoet/assets/js/src/form-editor/blocks/custom-radio/settings-preview.jsx
index 620e9faa51..879c1e71f5 100644
--- a/mailpoet/assets/js/src/form-editor/blocks/custom-radio/settings-preview.jsx
+++ b/mailpoet/assets/js/src/form-editor/blocks/custom-radio/settings-preview.jsx
@@ -2,7 +2,8 @@ import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Dashicon } from '@wordpress/components';
 import { partial } from 'lodash';
-import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import { DragDropContext, Draggable } from 'react-beautiful-dnd';
+import { StrictModeDroppable as Droppable } from 'form-editor/utils/strict-mode-droppable';
 
 function PreviewItem({ value, remove, onUpdate, onCheck, index }) {
   return (
diff --git a/mailpoet/assets/js/src/form-editor/utils/strict-mode-droppable.tsx b/mailpoet/assets/js/src/form-editor/utils/strict-mode-droppable.tsx
new file mode 100644
index 0000000000..a4c784c430
--- /dev/null
+++ b/mailpoet/assets/js/src/form-editor/utils/strict-mode-droppable.tsx
@@ -0,0 +1,21 @@
+// react-beautiful-dnd does not support React StrictMode this snippet fixes the issue
+// StrictModeDroppable.tsx
+// Credits to https://github.com/GiovanniACamacho and https://github.com/Meligy for the TypeScript version
+// Original post: https://github.com/atlassian/react-beautiful-dnd/issues/2399#issuecomment-1175638194
+import { useEffect, useState } from '@wordpress/element';
+import { Droppable, DroppableProps } from 'react-beautiful-dnd';
+
+export function StrictModeDroppable({ children, ...props }: DroppableProps) {
+  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>;
+}