IBX-2803: Fix drag and drop after React update #18
Conversation
| @@ -31,7 +31,7 @@ public function dragAndDrop(string $from, string $hover, string $to): void | |||
| throw new RuntimeException('drag-mock library has to be added to the page in order to use this method. Refer to README in BehatBundle for more information.'); | |||
| } | |||
|
|
|||
| $movingScript = sprintf('dragMock.dragStart(%s).dragOver(%s).delay(100).drop(%s);', $from, $hover, $to); | |||
| $movingScript = sprintf('{ const dragMockTmp = dragMock.dragStart(%s).delay(50).dragOver(%s).delay(50); setTimeout(() => dragMockTmp.drop(%s), 100); }', $from, $hover, $to); | |||
There was a problem hiding this comment.
After updating React from v17 to v18 it seems that React started to do renders asynchronously (what was mentioned e.g. here), which means that after calling render function component is not rendered immediately but after some short period of time, hence some modifications have been applied here to make d&d work in Page Builder and Form Builder.
-
The first problem was that in PB placeholder is rendered with delay so we need to delay evaluation of
$tostatement (equal to:document.querySelector('#page-builder-preview').contentDocument.querySelector('.droppable-placeholder')).delayfunction does not delaydropcall and evaluation of$to. Because of this we needsetTimeoutto both calldropand let browser engine evaluate$towith a delay. We needdragMockTmpto pass dragMock reference tosetTimeout. Block statement was added so thatdragMockTmpwon't pollute the global namespace. -
In Form Builder, when drag is started the state is being updated (
handleDragStartSidebarField) and we need to give React time to apply this state change thusdelay(50)was added beforedragOverso that whenhandleZoneDragOveris being called the state of the component is already updated. -
Finally,
delay(50)was added afterdragOver, because otherwisedropwould not be fired by dragMock (probably there is a bug in the library).
JIRA: https://issues.ibexa.co/browse/IBX-2803