Multiple paragraph fields in a single content type can cause conflicting behavior in frontend [#3356796]

Problem/Motivation

We are experiencing an interesting issue when we have two different paragraph fields in a single content type.

Basically we have a normal paragraph field where users can create different kinds of paragraphs (text, images etc.). In addition to that we have a specific paragraph field which allows users to add a single specific paragraph type to include some logos on the page.

Now it seems like this can cause interesting conflict and problems with the editor. When adding, removing and minimizing paragraphs in the content type, it sometimes happens that Drupal adds the wrong paragraph type to the field and can sometimes even replace existing paragraphs with the new one.

This seems to be related to Ajax requests now finishing before user either minimizes and removes a paragraph type.

We are using the stable widget with Gin admin theme.

The problem has been a bit hard to reproduce but we were able to reproduce it with several browsers and several users.

We also were able to take a video of it.

Comment	File	Size	Author
	paragraphs_duplication.mov	6.7 MB	heikkiy

Comments

Comment #1

27 April 2023 at 07:58

HeikkiY created an issue. See original summary.

Comment #2

heikkiy commented 27 April 2023 at 08:16

Issue summary:

View changes

Comment #3

heikkiy commented 28 April 2023 at 09:45

We were able to reproduce the issue in another project also.

The end result was a bit different because in that project there were not two different paragraph fields but a single field but the paragraph fields were still messed up with similar steps.

To reproduce the bug you need to do the following steps:
1. Add two paragraph items to the page.
2. Click on the Remove paragraph link under the three dots.
3. In quick succession, click also on the collapse link before the Ajax request for removal has time to finish.
4. The paragraph layout gets messed up.

Comment #4

heikkiy commented 3 May 2023 at 06:08

Some additional details.

We are also using the Paragraphs Asymmetric Translation Widgets module to allow us to have different paragraph content in different languages.

DIsabling the module didn't have any effect on the bug though.

I did think though if the following unsetting of field indexes might cause some issues but judging from the module installation, maybe not:
https://git.drupalcode.org/project/paragraphs_asymmetric_translation_wid...

Comment #5

heikkiy commented 24 May 2023 at 08:18

This issue seems to be related to the core issue #3174361. We are also using Entity browser in our node edit form and the debugging steps in the core issue seem really identical to our issue.