Skip to content

IBX-2803: Fix drag and drop after React update #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 19, 2022
Merged

IBX-2803: Fix drag and drop after React update #18

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dc635de
IBX-2803: Fix drag and drop after React update
tischsoic May 16, 2022
50f7950
Add scope
tischsoic May 16, 2022
a14c91d
Fix after FB fail
tischsoic May 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/lib/Browser/Element/RootElement.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Copy link
Contributor Author

@tischsoic tischsoic May 17, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

  1. The first problem was that in PB placeholder is rendered with delay so we need to delay evaluation of $to statement (equal to: document.querySelector('#page-builder-preview').contentDocument.querySelector('.droppable-placeholder')). delay function does not delay drop call and evaluation of $to. Because of this we need setTimeout to both call drop and let browser engine evaluate $to with a delay. We need dragMockTmp to pass dragMock reference to setTimeout. Block statement was added so that dragMockTmp won't pollute the global namespace.

  2. 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 thus delay(50) was added before dragOver so that when handleZoneDragOver is being called the state of the component is already updated.

  3. Finally, delay(50) was added after dragOver, because otherwise drop would not be fired by dragMock (probably there is a bug in the library).

$this->session->getDriver()->executeScript($movingScript);
}

Expand Down