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 {children}; +}